如何将material-ui按钮样式应用于html本机按钮

Question

pure-react-carousel给了我一个未设置样式的html按钮(ButtonBack)，我想用material-ui设置它的样式。

将按钮放在按钮内是not permitted。

有效的方法是手动分配className属性：

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

但它给人的感觉是错误的，而且渲染效果也不如真正的Mui-Button。

当然，我可以编写自己的css来模仿Muis，但这感觉也是错误的。

有没有更简单/直接的方法来解决这个问题？

Answer 1

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 }));

摘自：https://github.com/express-labs/pure-react-carousel/issues/175