Cannot move buttons horizontally

[cdcasey]

Since navButtonsWrapperProps and navButtonsProps apply to both buttons simultaneously, there seems to be no way to adjust the left style of the previous button or the right style of the next button. Even using the NavButton prop is proving difficult with the overflow set to hidden, although I'm still playing with that. Am I missing something simple?

[Jlnbnt]

Hi @cdcasey !

One workaround would be to target the button with :

<Carousel
     sx={{
       /* Left button */
       "& .css-hn784z button": {
         marginTop: "50px",
         color: "#53dc17",
       },
       /* Right button */
       "& .css-1abc02a button": {
         marginTop: "250px",
         color: "#FF0000",
       },
     }}
   >
{content}
</Carousel>

Result :

[cdcasey]

That's not horizontal, that's vertical. Also, those class names look generated. I'll double-check, but I don't think I could count on the ones I see being the same as the ones you pasted here, or indeed even having the same names between builds.

[Jlnbnt]

Once you've targeted the button you're free to apply whatever style you want.

I've checked on the official demo, the class names appear to be the same.

Again, it is a workaround, there might be an official way to do it ! Let me know if you find one, I'd be interested.