Это хороший дизайн, чтобы использовать стиль класса в компоненте Material-UI реагировать? - PullRequest
Новая
       13

Это хороший дизайн, чтобы использовать стиль класса в компоненте Material-UI реагировать?

0 голосов
/ 23 мая 2019

Я работаю над сайтом реагирования и пытаюсь использовать компонент material-ui.Я обнаружил, что material-ui предлагает указать styles в свойстве classes компонентов.Каждый компонент может использовать className={...} для получения стилей.

...
return (
      <div className={classes.root}>
 ...

Должен ли я следовать этой схеме, если я решу использовать material-ui?Или я могу создать sass файл отдельно и импортировать их в каждый компонент?Если я это сделаю, это против material-ui дизайн?Или я пропущу какие-либо material-ui функции?

1 Ответ

0 голосов
/ 23 мая 2019

Если стили специфичны для компонента, то лучше сохранить стили с этим компонентом и использовать классы, как вы это сделали.

Если стили или функции совместно используются компонентами, лучше всего их импортировать.

Из-за роста популярности css-in-js Material UI переместился в сторону Material UI CSS в подходе js .

Библиотека в стиле была одной из первых, кто применил этот подход, и стал популярным, поскольку разработчикам понравился подход к использованию теговых литералов шаблонов. Он хорошо связан с React.

Существует 3 разных API, похоже, что вы используете Hook API 

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

Вы также можете использовать API компонента Styled. Пример приведен ниже для пользовательского интерфейса материала, который применяет стили внутри компонента, что полезно, если стили меняются в зависимости от условий, например, от того, какие реквизиты передаются. В этом случае целесообразно инкапсулировать логику внутри этого компонента, а не импортирующего и внешнего класса. 

import React from 'react';
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

// Like https://github.com/brunobertolini/styled-by
const styledBy = (property, mapping) => props => mapping[props[property]];

const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
  background: styledBy('color', {
    red: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    blue: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
  }),
  border: 0,
  borderRadius: 3,
  boxShadow: styledBy('color', {
    red: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    blue: '0 3px 5px 2px rgba(33, 203, 243, .3)',
  }),
  color: 'white',
  height: 48,
  padding: '0 30px',
});

function AdaptingStyledComponents() {
  return (
    <div>
      <MyButton color="red">Red</MyButton>
      <br />
      <br />
      <MyButton color="blue">Blue</MyButton>
    </div>
  );
}

export default AdaptingStyledComponents;

В этом сценарии лучше сохранить стили внутри этого компонента. Таким образом, в целом это баланс между импортом общих стилей и применением локальных стилей.

...