Material UI - 有没有办法在 MUI 组件中使用 className 道具答案

【问题标题】：Material UI - is there any way to use className props in MUI ComponentMaterial UI - 有没有办法在 MUI 组件中使用 className 道具
【发布时间】：2021-06-27 11:28:12
【问题描述】：

我在前端使用 React 和 Material-UI(MUI)。

在 MUI 的 Button 组件中，有 className 属性，所以我不知道如何使用style.css 中的类来应用我的风格。

我可以使用id 而不是className 来应用样式，但我想知道是否有任何方法可以做到这一点。

请不要告诉我在index.jsx 中修改为useStyles 中的样式，因为我将有其他组件（DropdownBtn 等）使用相同的样式。

按钮/index.jsx

import React, {useState} from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

export default function IconLabelButtons(props) {
  const classes = useStyles();
  const {name} = props;

  return (
      <Button
        variant="contained"
        color="primary"
        className={classes.button}
      >
        {name}
      </Button>
  );
}

App/style.css

.Button {
  font-size: 14px;
}

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您可以简单地将其他 CSS 类名传递/添加到按钮，然后在您的 styles.css 中使用它

return (
  <Button
    variant="contained"
    color="primary"
    className={classes.button+" yourclasshere"}
  >
    {name}
  </Button>

);

然后像这样使用

.yourclasshere{
  font-size: 14px;
}

【讨论】：

不工作。我添加后似乎删除了classes.button 的样式