Повторное использование пользовательских стилей в Material-UI - PullRequest
Новая
       7

Повторное использование пользовательских стилей в Material-UI

0 голосов
/ 02 декабря 2018

Впервые на материал-UI здесь и пытается найти лучший способ использования CSS в JS.Из демонстрационного кода я вижу, что вставка стилей в виде классов довольно проста с использованием withStyles, но если я сделаю следующее, мне потребуется заново создать стили «grow» и «defaultPadding» в каждом компоненте. 

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';


function Dashboard(props) {

    const { classes } = props;

    return (

        <Paper className={classes.defaultPadding}>
            Hello
        </Paper>
    );

}

const styles = theme => ({
    grow: {
        flexGrow: 1
    },
    defaultPadding: {
        padding: theme.spacing.unit * 3 + 'px'
    }
});


export default withStyles(styles)(Dashboard);

Я мог бы легко создать фабричный метод во внешнем файле, который возвращает массивный объект, содержащий все мои стили по умолчанию, но мне нужно было бы передать ему существующую тему, если я хочу использовать такие вещи, как 'theme.spacing.unit '.

Итак, есть ли способ создать несколько моих собственных стилей многократного использования, используя значения тем, а затем импортировать их в любой компонент?

Бонусный вопрос: Возможно ли создавать вложенные объекты, чтобы я мог делать такие вещи?... 

className={classes.layout.header}

1 Ответ

0 голосов
/ 03 декабря 2018

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

В Codesandbox Iсоздал два компонента Dashboard.Один с styled-components только для того, чтобы показать, как работает ThemeProvider, а другой компонент использует withStyles.

Для фабрики withStyles Я назвал его sharedStyles в демоверсии, и с этим вы можете создатьновый объект стиля внутри ваших компонентов, вызвав его и расширив его до нового стиля (только если вам нужно добавить больше стилей).

Вложенность внутри styles не поддерживается.Вы можете создать ключи, такие как layout.heading или сплющить объект перед его использованием (см. Код в демоверсии).Оба не идеальны, и я бы не стал их использовать.

Я лично предпочитаю styled-components, но вам не нужно переключаться на это.Вы можете посмотреть исходный код , как они его реализовали, и использовать его в своем коде для передачи темы вашему компоненту.

ThemeProvider использует React Context-Api.

...