时间戳

首页 > 解决方案 > 如何将material-ui按钮样式应用于html-native按钮

javascript - 如何将material-ui按钮样式应用于html-native按钮

问题描述

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

不允许在按钮内放置按钮。

有效的是手动分配 className 道具：

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

但感觉不对，而且渲染效果不如真正的 Mui-Button。

当然，我可以编写自己的模仿 Muis 的 css，但这也感觉不对。

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

标签： javascriptcssreactjstypescriptmaterial-ui

解决方案

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

推荐阅读