Установить свойство стиля вactjs для всех компонентов одного типа - PullRequest
Новая
       9

Установить свойство стиля вactjs для всех компонентов одного типа

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

Я начинаю работать с ReactJS и MaterialUI и пытаюсь понять, чем стилизация отличается от использования CSS.

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

Например, если у меня есть 10 TextField (на самом деле я использую TextInput из response-admin) в форме, я хотел бы, чтобы10 из них имеют одинаковую ширину без необходимости объявлять объект style, передать его с помощью withStyles(style) HOC и установить className={classes.input} один за другим.

1 Ответ

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

Краткий ответ - здесь нет простого способа сделать то, что вы хотите.

У вас есть несколько вариантов:

Просто добавьте класс к каждому из ваших компонентов 

const MyForm = ({classes}) => (
<Form> 
   <TextInput className = {classes.textInput} /> 
   <TextInput className = {classes.textInput}/> 
   <TextInput className = {classes.textInput}/>     
</Form> 
)

const styles = {
    textInput: {
       color: "red" 
    }
}

Недостатком этого является то, что он повторяется.

Стиль ввода элемента dom напрямую, используя вложенный селектор 

const MyForm = ({classes}) => (
<Form className={classes.root}> 
   <TextInput/> 
   <TextInput/> 
   <TextInput/>     
</Form> 
)

const styles = {
    root: {
        "& input" {
            color: "red", 
        }
    }
}

Здесь это будет стиль элемента input напрямую, а не сам компонент React.Недостатком этого является то, что вы можете закончить стилизацию входных данных, которые вы не собирались делатьОднако я считаю, что это лучший способ сделать такие вещи, как стилизация таблиц и т. Д.

Создайте собственную библиотеку компонентов более высокого порядка, чтобы обернуть компоненты Material-UI

См. Мой вопрос по разработке программного обеспечения. 

const MyTextInput = ({classes, ...rest}) => (
    <TextInput className = {classes.root} ...rest/> 
)

const styles = {
    root: {
       color: "red", 
    }
}

const MyForm = ({classes}) => (
    <Form> 
       <MyTextInput/> 
       <MyTextInput/> 
       <MyTextInput/>     
    </Form> 
);

Это похоже на ненужный шаблон и т. Д., Но я думаю, что в долгосрочной перспективе - это лучший подход для проекта, который может быть реализован дляв то время как - с точки зрения поддержания согласованной схемы проектирования во всем приложении.

...