Перенос стилей makeStyles() MaterialUI в отдельный файл

изучаю React, пишу свой проект для развития и резюме;) , использую Material UI. Во время проекта, возник вопрос о структиризации папок , как мне грамотно перенести стили makeStyles в другой файл , чтобы не возникало каши в jsx компоненте? Заранее спасибо.


Ответы (1 шт):

Автор решения: Ruslan Semenov

При использовании MaterialUL стили создаются в файле через функцию сonst classes = useStyles();

вынесите создание стилей в отдельный файл и сделайте экспорт useStyles

Вот примерный результат:

style.js:

import { makeStyles } from '@material-ui/core';
export const useStyles = makeStyles((theme) => ({
    button: {
        textTransform: 'capitalize',
    },
}));

component.js:

import useStyles from './style';
const ShareButton = () => {
    const classes = useStyles();
    return (
       <Button className={classes.button}/>
    )
});
→ Ссылка