web-dev-qa-db-ja.com

material-uiのクラスとスタイルを上書きする方法（React）

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;

しかし、これは結果をもたらしません。間違って上書きしようとしていますか？ここでどこが間違っているのかわかりません...

javascriptreactjsmaterial-designmaterial-ui
8
user818700

この答えは、@ Nadunの答えを完全なものにします-彼は称賛に値します。マテリアルUIクラスをオーバーライドするには、次のことを理解する必要があります。

1。上部のconst変数にスタイルを追加します

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

2. マテリアルのUIクラスをオーバーライドするには、 "withStyles"で高階関数を使用する必要があります

_    export default withStyles(styles)(NavigationBar);
_

。レンダリング関数の小道具としてこれらのスタイルを使用できるようになりました-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>
   )
}
_
18
Sandeep Chikhale
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/

これがあなたを助けることを願っています

2
Nadun