Material-ui样式类型覆盖

Question

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

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。 当我使用小的MuiIconButton-root时，有什么方法可以覆盖MuiSvgIcon的填充值吗？

下面的图片：

Answer 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中编辑样式，它实际上会在屏幕上显示这些更改。