Расширьте класс стиля JSS вместо того, чтобы перезаписать его - PullRequest
Новая
       9

Расширьте класс стиля JSS вместо того, чтобы перезаписать его

0 голосов
/ 14 ноября 2018

В своем приложении React я использую React JSS для стилизации. Предположим, у меня есть эти два файла (пропуская импорт и другие неинтересные вещи).

Это App.js: 

const styles = {
  root: {
    backgroundColor: '#ffffff',
  },
  header: {
    backgroundColor: '#ff0000',
  }
};

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
        <div className={classes.root}>
          <Header classes={{ root: classes.header }}/>
        </div>
    );
  }
}

export default withStyles(styles)(App);

и это Header.js: 

const styles = theme => ({
    root: {
        backgroundColor: '#0000ff',
        padding: '1em',
    },
});

class Header extends Component {
    render() {
        const { classes } = this.props;
        return (
            <header className={classes.root}>
                Hello header
            </header>
        );
    }
}

export default withStyles(styles)(Header);

Я хотел бы иметь "переопределение" стиля корневого компонента заголовка без полной его перезаписи . Я могу сделать одну из двух вещей:

  1. используйте <Header className={classes.header}/>, в результате элемент header будет иметь класс App-root-0-1-2, что означает синий фон с отступом;

  2. используйте <Header classes={{ root: classes.header }}/> (как указано выше), в результате элемент header имеет класс App-header-0-1-2, что означает, что фон читается без заполнения.

Кажется, у меня может быть только стиль, определенный компонентом, ИЛИ тот, который родительский определяет для его переопределения. Тем не менее, я хотел бы расширить внутренний стиль с тем, который передается родителем - конечно, с родительским приоритетом в конфликтах. В этом случае я хочу иметь красный фон с отступом.

Как мне этого достичь? Разве это невозможно - нужно ли передавать редактируемый стиль как свойство?

1 Ответ

0 голосов
/ 14 ноября 2018

Вы можете предоставить внешнее имя класса и использовать имена классов (https://github.com/JedWatson/classnames) (или просто встроить их), чтобы условно отобразить имя этого класса, если оно присутствует: 

import classNames from "classnames";

const styles = theme => ({
    root: {
        backgroundColor: '#0000ff',
        padding: '1em',
    },
});

class Header extends Component {
    render() {
        const { classes, className } = this.props;
        return (
            <header 
              className={classNames({ 
                [classes.root]: true, 
                [className]: className 
              })}>
                Hello header
            </header>
        );
    }
}

export default withStyles(styles)(Header);

Затем использовать его: 

<Header className={classes.myParentClass} />

Это приведет к именам классов, например Header-root-0-1-2 App-myParentClass-0-4-3

...