Как создать класс css в createMuiTheme () и использовать их напрямую, без необходимости получать его значение из реквизита «классов» компонента? - PullRequest
Новая
       8

Как создать класс css в createMuiTheme () и использовать их напрямую, без необходимости получать его значение из реквизита «классов» компонента?

0 голосов
/ 02 января 2019

Я пытаюсь избежать ввода избыточного кода. В нескольких компонентах я создал одни и те же классы CSS. Я хочу добавить их в тему, используя createMuiTheme (), а затем только используя стиль непосредственно из темы, без необходимости вызывать реквизиты "classes" на реквизитах Component.

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

const theme = createMuiTheme({
  palette:{
      primary: {
        main: '#47286E',
        light: '#D91677'
      },
      secondary: {
        main: '#9156D8' 
      },
  },

 fab: {
    position: "relative",
    top: 0,
    marginTop: 20px
    textTransform: 'none',
    width: 220,
    height: 50
  },

});

затем я передал тему другим компонентам, используя 

<MuiThemeProvider theme={theme}>

Я попытался импортировать потрясающую кнопку прямо внутри компонента 

<Fab variant="extended" className={this.props.theme.fab} size='small'>
    Change
</Fab>

однако, похоже, я не получаю никакого значения, когда пытаюсь получить класс fab css. Я просто не хочу создавать совершенно новый 

const styles = theme => {
    blabbla
}

и импортируйте его в каждый компонент, используя реквизиты "classes", если то, что я хочу, уже находится в теме, передаваемой его дочерним компонентам.

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Не думаю, что createMuiTheme предназначено для этого.

В качестве альтернативы вы можете просто создать объект стиля, который хотите использовать повторно 

const styles = {
  fab: {
    position: "relative",
    top: 0,
    marginTop: 20px
    textTransform: 'none',
    width: 220,
    height: 50
  }
};

И просто импортируйте и используйте его там, где вам нужно 

import fabStyles from '../../somewhere-everyone-can-get-it.js';
import styles from './styles-for-this-component.js';

...

withStyles({...fabStyles, ...styles})(Component);

Если вам нужна тема и стили. 

withTheme(withStyles({...fabStyles, ...styles})(Component));

Вы также можете использовать recompose, чтобы убрать это.

0 голосов
/ 02 января 2019

className={this.props.theme.fab} не работает, потому что this.props.theme.fab - это объект, а не имя класса. Когда используется withStyles, он заботится о создании уникального имени класса (например, доступного через props.classes.fab), а также о внедрении CSS для этого класса в заголовок документа. Для объекта fab в вашей теме эта работа не выполнена.

В приведенном ниже коде показано несколько способов избежать избыточного кода. Первая - это функция withFab, которая инкапсулирует CSS и вызов withStyles.

Второй использует объект fab более напрямую и просто передает его свойству style, а не свойству className. Вы можете получить стили из theme.fab (а не из отдельного js-файла), аналогичные вашему первоначальному подходу, но нет необходимости в том, чтобы включать это в вашу тему, если только вы не хотите переопределить ее с помощью другого * 1016. * в вашей иерархии рендеринга.

У второго подхода (свойство style) есть пара недостатков:

  • Если вы используете это для множества различных элементов, CSS будет избыточно указан в DOM для каждого из этих элементов.
  • Он не будет поддерживать CSS, который требует классов (например, с использованием псевдоэлементов, таких как: hover)

Поэтому я бы порекомендовал нечто более похожее на первый вариант (UseWithFab/withFab), показанный ниже.

withFab.js

import withStyles from "@material-ui/core/styles/withStyles";

const styles = {
  fab: {
    backgroundColor: "lightblue"
  }
};
export const fabStyles = {
  backgroundColor: "lightgreen"
};
const withFab = component => {
  return withStyles(styles)(component);
};
export default withFab;

index.js

import React from "react";
import ReactDOM from "react-dom";
import withFab, { fabStyles } from "./withFab";

const UseWithFab = withFab(props => {
  return <div className={props.classes.fab}>Using withFab</div>;
});
const UseFabStyles = props => {
  return <div style={fabStyles}>Using fabStyles</div>;
};
function App(props) {
  return (
    <>
      <UseWithFab />
      <UseFabStyles />
    </>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit 0xlk0vxmxn

...