时间戳

首页 > 解决方案 > Material-ui 样式类型覆盖

css - Material-ui 样式类型覆盖

问题描述

当我MuiIconButton-root将 MuiSvgIcon 与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我使用 small 时的填充值MuiSvgIcon？

跟着图片：

在此处输入图像描述

标签： cssreactjsstylesmaterial-ui

解决方案

是的，您可以像这样覆盖 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 中编辑样式，它实际上会在屏幕上显示这些更改。

推荐阅读