简体   繁体   中英

How to apply material-ui button style to html-native button

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?

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM