如何覆盖（覆盖）material-ui（React）中的类和样式

Posted 2023-02-22

【中文标题】如何覆盖（覆盖）material-ui（React）中的类和样式

【英文标题】：How to override (overwrite) classes and styles in material-ui (React)

【发布时间】：2018-11-22 16:40:03

【问题描述】：

我正在使用 material-ui 的 1.2.1 版，我正在尝试覆盖 AppBar 组件以使其透明。该文档概述了如何覆盖样式here。

我的代码：

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;

但这不会产生任何结果。我是否试图覆盖错误？不知道我哪里出错了......

【参考方案1】：

除了上面的答案，如果你想为一些内部自动生成的元素添加样式，你可以使用这个语法来做到这一点

<TextField className=classes.txtField

那么在 classes 对象中，我们可以通过这种方式接近 TextField 中存在的标签

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

【参考方案2】：

这个答案使@Nadun 的答案完整——他值得称赞。 要覆盖材质 ui 类，我们需要了解以下内容：

1.在顶部的 const 变量中添加样式

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

2。 我们需要使用带有“withStyles”的高阶函数来覆盖材质ui类

    export default withStyles(styles)(NavigationBar);

3. 现在这些样式可以作为渲染函数中的道具提供给我们 尝试这样做 - console.log(this.props.classes) - 你会得到一个与你包含在样式对象中的属性相对应的类名， 喜欢 - root: "Instructions-root-101"。

使用类属性添加它

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

【讨论】：

我们现在可以使用 useStyles 钩子了：material-ui.com/ru/styles/basics

【参考方案3】：

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/

希望对你有帮助

【讨论】：

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