Question

我正在使用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;

但这没有结果。我试图覆盖错误吗？不知道我在哪里出错...

Answer 1

此答案使@Nadun答案完整-他应得的荣誉。要覆盖重要的ui类，我们需要了解这些内容

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

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

2。 我们需要使用带有“ withStyles”的高阶函数来覆盖材料用户界面类

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

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/

希望这会对你有所帮助

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

2 个答案: