Material-ui 样式类型覆盖答案

【问题标题】：Material-ui style type overrideMaterial-ui 样式类型覆盖
【发布时间】：2020-03-16 07:45:47
【问题描述】：

当我将 MuiSvgIcon 与 fontSizeSmall 一起使用时，我想修改 MuiIconButton-root 类。

import React from 'react'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiSvgIcon: {
      fontSizeSmall: {
        padding: "5px"
      }
    }
  }
});

export default function Root(props) {
  return (
    <ThemeProvider theme={theme}>
      <MyApp />
    </ThemeProvider>
  )
}

我修改了MuiSvgIcon，但无法修改MuiButtonBase-root。当我使用小的MuiSvgIcon 时，有什么方法可以覆盖MuiIconButton-root 的填充值？

如下图：

【问题讨论】：

是的，你可以关注这里的官方文档material-ui.com/styles/basics

标签： css reactjs styles material-ui

【解决方案1】：

是的，您可以像这样覆盖 root 的样式，我不会创建您的确切场景，但我将使用 Material UI 中的按钮向您展示相同的功能，首先获取所有需要的文件：

npm install @material-ui/styles
npm install @material-ui/core

然后：

    //other react imports
import { makeStyles, withStyles } from '@material-ui/core/styles'; //you need to include this to change the style
import Button from '@material-ui/core/Button'; //this is just the button

const useStyles = theme => ({
    root: {
        '& > *': {
            margin: theme.spacing(1),
        },
    },
    button: {
        fontSize: "16px",
        fontWeight: "600",
        textAlign: "center",
        border: "none",
        cursor: "pointer",
        color: "#fff",
        backgroundColor: "#C8385E"
    }
});

class Welcome extends React.Component {
    render() {
        return (<div>
            <Button
                className={classes.button}
                variant="contained" component="span">
                BUTTON TEXT
            </Button>
        </div>);
    }
}

export default withStyles(useStyles)(Welcome);

您需要像上面显示的那样导出类，包括“withStyles”并传入您拥有的样式，这里称为“useStyles”，然后传递类名。这样您就可以在 UseStyles 中编辑样式，它实际上会在屏幕上显示这些更改。

【讨论】：

感谢您的回答。