0

pure-react-carousel gives me an unstyled html button (ButtonBack) and I want to style it using material-ui.

Placing buttons inside buttons is not permitted.

What works is to assign the className prop manually:

<ButtonBack className={"MuiButtonBase-root MuiButton-root MuiButton-contained"}>
  <NavigateBeforeIcon />
</ButtonBack>

But it feels wrong, and also does not render as nice as an real Mui-Button.

Of course I could write my own css that mimics Muis but that feels wrong too.

Is there an easier/straight-forward way to this problem?

ohlr
  • 1,839
  • 1
  • 13
  • 29
  • What do you mean by feels wrong? Wrong as in bad feeling or bad aesthetically? – Pushkin Mar 23 '20 at 17:06
  • How to know the names ("MuiButtonBase-root MuiButton-root")? They are hard coded - copied from some example. I would like to have something programmatic. – ohlr Mar 23 '20 at 17:15
  • If that's your concern, why not just use `import {Button} from '@material-ui/core'`? – Pushkin Mar 23 '20 at 17:16
  • I need to use `ButtonBack` because it is triggers the carousel – ohlr Mar 23 '20 at 17:18
  • Your updated answer still contains hard-coded css. I found an solution in on github. – ohlr Mar 23 '20 at 18:09

1 Answers1

0
import { ButtonFirst } from 'pure-react-carousel';
import Button from '@material-ui/core/Button';

const CustomButtonFirst = React.forwardRef((props, ref) => <Button component={ButtonFirst} ref={ref} {...props} />);

// This line is needed because the "disabled" is internal state of "ButtonFirst".
export default withStore(CustomButtonFirst, state => ({ disabled: state.currentSlide === 0 }));

Taken from: https://github.com/express-labs/pure-react-carousel/issues/175

ohlr
  • 1,839
  • 1
  • 13
  • 29