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.