элемент дизайна внутри класса материал пользовательского интерфейса - PullRequest
Новая
       9

элемент дизайна внутри класса материал пользовательского интерфейса

0 голосов
/ 16 мая 2018

возможно ли стилизовать все Field с Grid в материале-интерфейсе?Я уже знаю, как сделать это в css, но я не могу найти, как это сделать в jss. Я пробовал это, но не работает: 

     const styles = {
      shopForm: {
    textAlign : 'center',
    Field :{
        width: '60%'
     }};

как мне изменить styles?возможен ли этот тип стилей в JSS?в CSS используется для этого: 

 .shopForm Field
{...}

Я использую материал-UI 

<Grid item lg={4} className={classes.shopForm}>
    <Field
        name="name"
        type="text"
        label="name"
        component={TextField}
    />
    <Field
        name="plaque"
        type="text"
        label="plaque"
        component={TextField}
    />
    <Field
        name="unit"
        type="text"
        label="unit"
        component={TextField}
    />
    <Field
        name="text"
        type="text"
        label="text"
        component={TextField}
        multiline
        row={3}
    />
</Grid>

Ответы [ 3 ]

0 голосов
/ 11 сентября 2018

Вы можете добавить classNames к полям и добавить CSS: 

<Grid item lg={4} className={classes.shopForm}>
    <Field
        className="grid-field"
        name="name"
        type="text"
        label="name"
        component={TextField}
    />
    <Field
        className="grid-field"
        name="plaque"
        type="text"
        label="plaque"
        component={TextField}
    />
    <Field
</Grid>

и создать обычный файл CSS: 

.grid-field {
    font-size: 20px;
}
0 голосов
/ 12 сентября 2018

Найдите какой-нибудь ответ через некоторое время!Стилизация самого компонента Field невозможна, потому что он сделан из других элементов, но вы можете стилизовать элементы, которые находятся внутри компонента materialUI: 

shopForm: {
    textAlign : 'center',
'& input' :{
    width: '60%',
    color:'grey'
   },
'& label':{
  fontSize:'15px'
}

, поэтому вам нужно сначала найти, какой элемент вы хотите стилизовать, а затем датьстиль для родительского класса. 

<Grid 
  item
  lg={4}
  className={classes.shopForm}
>
  <Field
    name="name"
    type="text"
    label="name"
    component={TextField}
  />
  <Field
    name="plaque"
    type="text"
    label="plaque"
    component={TextField}
  />
  <Field
    name="unit"
    type="text"
    label="unit"
    component={TextField}
  />
  <Field
    name="text"
    type="text"
    label="text"
    component={TextField}
    multiline
    row={3}
  />
</Grid>
0 голосов
/ 16 мая 2018

Вы можете попробовать вот так 

//create a css what you want 
const styles = {
      shopForm: {
       textAlign : 'center',
     },
     field :{
        width: '60%'
     }
}

 <Grid item lg={4} style={styles.shopForm}>
     <Field
        name="name"
        type="text"
        label="name"
        component={TextField}
        style={styles.field} //add the style to the Field
      />
 <Grid >
...