Material-ui 样式类型覆盖

Question

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

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 的填充值？

如下图：

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);

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

Material-ui 样式类型覆盖

Material-ui style type override

css

styles

reactjs

material-ui