Правильный способ использования Material UI в проекте reactjs - PullRequest
Новая
       51

Правильный способ использования Material UI в проекте reactjs

0 голосов
/ 10 апреля 2020

Я недавно начал использовать Material UI, и я не уверен, как правильно его использовать. В некоторых случаях я хочу настроить стили компонентов материала. Но для этого мне нужно работать в файле ". js", который я считаю неуместным.

Есть ли способ сохранить несколько пользовательских стилей / компонентов компонентов пользовательского интерфейса материала в другой файл, а затем импортировать стили / компоненты оттуда?

Спасибо!

1 Ответ

0 голосов
/ 10 апреля 2020

Нет проблем в отделении стилей от компонентов.

Я даже импортирую хук makeStyles внутри styles.js. 

// styles.js
import { makeStyles } from '@material-ui/core/styles';

const styles = makeStyles(theme => ({
  main: {
    padding: theme.spacing(2),
  },
}));

export default styles;

You можете импортировать useStyles в компонент, если вам больше нравится 

// Component.jsx
import React from 'react';
import styles from './styles';

const Component = () => {
    const classes = styles();
    return (
      <WhatEverComponent classsName={classes.main}/>
    );
}

LE: makeStyles в компоненте 

// styles.js

const styles = theme => ({
  main: {
    padding: theme.spacing(2),
  },
});

export default styles;

// Component.jsx
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import stylesObj from './styles';

const styles = makeStyles(stylesObj);

const Component = () => {
    const classes = styles();
    return (
      <WhatEverComponent classsName={classes.main}/>
    );
}

Я сделал также песочницу здесь . Вы можете проверить, как работают оба. Я бы предложил использовать первый вариант.

...