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

Question

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

在 MUI 的 Button Component 中，有classNameprop，所以我不知道如何使用style.css.

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

请不要告诉我修改 inuseStyles中的样式index.jsx，因为我将有其他组件（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>
  );
}

应用程序/style.css

.Button {
  font-size: 14px;
}

标签： cssreactjsmaterial-ui

Answer 1

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

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

);

然后像这样使用

.yourclasshere{
  font-size: 14px;
}