如何覆盖(覆盖)material-ui中的类和样式(反应) [英] How to override (overwrite) classes and styles in material-ui (React)

问题描述

我正在使用 material-ui 的1.2.1版本，并且我试图覆盖<一个href ="https://material-ui.com/api/app-bar/" rel ="noreferrer"> AppBar 组件是透明的.该文档概述了如何在此处覆盖样式.

I'm using version 1.2.1 of material-ui and I'm trying to override the AppBar component to be transparent. The documentation outlines how to override styles 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;

但这不会产生任何结果.我是想改写错误吗?不知道我在哪里错了...

But this yields no results. Am I trying to override wrong? Not sure where I'm going wrong here...

推荐答案

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

This answer makes @Nadun answer complete - he deserves the credit. To override material ui classes we need to understand these things:

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"} .

3. Now these styles are available to us as props in the render function try doing this - console.log(this.props.classes) - you get a classes name correspoding to properties you include in styles object, like - {root: "Instructions-root-101"}.

添加带有classes属性的

Add that with classes attribute

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

这篇关于如何覆盖(覆盖)material-ui中的类和样式(反应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！