如何覆盖（overwrite）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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

1. 我们需要使用带有“withStyles”的高阶函数来覆盖材料ui类

    export default withStyles(styles)(NavigationBar);

3. 现在我们可以使用这些样式作为渲染函数中的道具尝试这样做 - console.log(this.props.classes) - 你会得到一个对应于样式对象中包含的属性的类名称，例如 - {root: "Instructions-root-101"} .

添加 classes 属性

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

原文由 Sandeep Chikhale 发布，翻译遵循 CC BY-SA 4.0 许可协议