Как переписать классы и стили в Material-UI (React) - PullRequest
Новая
       24

Как переписать классы и стили в Material-UI (React)

0 голосов
/ 13 июня 2018

Я использую версию 1.2.1 material-ui и пытаюсь перезаписать компонент 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;

Но это не дает результатов.Я пытаюсь переписать неправильно?Не уверен, где я иду не так ...

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Этот ответ завершает ответ @Nadun - он заслуживает похвалы.Чтобы переопределить материальные пользовательские классы, мы должны понимать следующие вещи:

1.Добавьте ваши стили в константную переменную вверху 

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

Добавьте это с атрибутом классов 

render() {
   const { classes } = this.props;
   return ( 
       <AppBar classes={{ root: classes.root }}>
        // Add other code here
       </AppBar>
   )
}
0 голосов
/ 13 июня 2018 
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 /

надеюсь, что это поможет вам

...