如何在material-ui (React)中覆盖（重写）类和样式

Question

我正在使用material-ui版本1.2.1，尝试将AppBar组件覆盖为透明。文档在此处概述了如何重写样式。

我的代码：

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';

class NavigationBar extends Component {
  render() {
    const styles = {
      root: {
        backgroundColor: 'transparent',
        boxShadow: 'none',
      },
    };

    return (
      <AppBar position={this.props.position} classes={{ root: styles.root }}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
  }
}

export default NavigationBar;

但是这没有产生任何结果。我是在尝试覆盖错误的内容吗？不确定我做错了什么...

- user818700

Answer 1

这个答案使得@Nadun的回答完整 - 他应该得到赞扬。

要覆盖Material UI类，我们需要了解以下几点：

1. 在顶部添加一个const变量来添加你的样式

    const styles = {
      root: {
        backgroundColor: 'transparent !important',
        boxShadow: 'none',
        paddingTop: '25px',
        color: '#FFFFFF'
      }
    };

2. 我们需要使用高阶函数和 "withStyles" 来覆盖 Material UI 的类

    export default withStyles(styles)(NavigationBar);

3. 现在我们可以将这些样式作为 props 在 render 函数中使用。尝试执行此操作 - console.log(this.props.classes) - 您会得到一个与 styles 对象中包含的属性相对应的类名，例如 - {root: "Instructions-root-101"}。

将其与 classes 属性一起添加。

render() {
   const { classes } = this.props;
   return ( 
       <AppBar classes={{ root: classes.root }}>
        // Add other code here
       </AppBar>
   )
}

- Sandeep Chikhale

---

现在我们可以使用useStyles hook了：https://material-ui.com/ru/styles/basics/ - Erik Rybalkin

Answer 2

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  transparentBar: {
    backgroundColor: 'transparent !important',
    boxShadow: 'none',
    paddingTop: '25px',
    color: '#FFFFFF'
  }
};

class NavigationBar extends Component {
  render() {
    return (
      <AppBar className={classes.transparentBar}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
  }
}

export default withStyles(styles)(NavigationBar);

找到重要的部分：

backgroundColor: 'transparent !important'

更多细节请参考此指南：https://material-ui.com/customization/overrides/

希望这可以帮助你

- Nadun

---

这个答案不完整，无法解决问题。我已经在下面包含了完整的答案。 - Sandeep Chikhale

Answer 3

除了以上的答案，如果您想为一些内部自动生成的元素添加样式，您可以使用以下语法：

<TextField className={classes.txtField}

在classes对象中，我们可以通过以下方式访问TextField内部的标签。

const useStyles = makeStyles((theme) => ({
    txtField: {
        "& label": {
             padding: 23
        }
    }
});

- Muhammad Awais

Answer 4

import ...;
import { withStyles } from '@mui/styles';

const styles = {
  transparentBar: {
    backgroundColor: 'transparent !important',
    boxShadow: 'none',
    paddingTop: '25px',
    color: '#FFFFFF'
  }
};

function NavigationBar (props) {

    const { classes } = props;
    return (
      <AppBar className={classes.transparentBar}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
}

export default withStyles(styles)(NavigationBar);

这对我起了作用。

请注意！更新MUI核心版本

- Hadara

Answer 5

Material UI v5 覆盖样式的方法：

index.js

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from '@mui/material/styles';
import App from './containers/App';
import theme from './style/theme';

render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

theme.js会全局覆盖样式，仅适用于在theme.js文件中描述的那些组件

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#009BDF',
    },
    secondary: {
      main: '#14568D',
    },
    error: {
      main: '#FF0000',
    },
  },
  typography: {
    fontFamily: 'Rubik Light, Helvetica, Arial, sans-serif',
  },
  components: {
    MuiAccordion: {
      styleOverrides: {
        root: {
          marginBottom: '5px',
          borderRadius: '0.6rem',
          boxShadow: 'none',
        },
      },
    },
    MuiAccordionSummary: {
      styleOverrides: {
        root: {
          background: '#14568D',
          borderRadius: '4px',
          content: {
            margin: '0px',
          },
        },
      },
    },
    MuiAccordionDetails: {
      styleOverrides: {
        root: {
          background: '#DEF1F9',
          borderBottomLeftRadius: '4px',
          borderBottomRightRadius: '4px',
        },
      },
    },
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          backgroundColor: '#FFFFFF',
          color: '#2f343D',
          border: '1px solid',
          fontSize: '1rem',
          padding: '3px 20px',
        },
      },
    },
    MuiDialog: {
      styleOverrides: {
        paper: {
          background: '#EFF8FC',
        },
      },
    },
  },
});

- Ivan K.