web-dev-qa-db-fra.com

élément de style à l'intérieur du matériau de classe ui

est-il possible de styliser tous les Field à l'intérieur de Grid dans material-ui? Je sais déjà comment le faire en CSS, mais je ne trouve pas comment le faire en jss J'ai essayé cela mais ne fonctionne pas:

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

comment dois-je changer styles? ce type de style est-il possible en jss? en CSS utilisé pour ce faire:

.shopForm Field
{...}

J'utilise Material-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>
cssreactjsmaterial-uijss
7
Linton Samuel Dawson

Trouvez une sorte de réponse après un certain temps! Le style du composant Field lui-même est impossible car il est fait d'autres éléments, mais vous pouvez styliser les éléments qui se trouvent à l'intérieur du composant materialUI:

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

vous devez donc trouver l'élément que vous souhaitez styliser en premier, puis donner du style à la classe du parent.

<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>
4
Linton Samuel Dawson

Vous pouvez ajouter des noms de classe aux champs et ajouter du 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>

et créer un fichier css normal:

.grid-field {
    font-size: 20px;
}
0
kakaja

Oui, il est possible que vous puissiez installer style-it package de npm c'est super amusant de pouvoir faire un style spécifique pour un composant ou d'appliquer le style dans tout votre composant.

Pas besoin de créer un fichier CSS, vous pouvez ajouter instantanément le style à votre composant.

npm i style-it

Dans le composant ci-dessus, le style ne s'appliquera que pour le composant AppA

import React from "react";
import Style from 'style-it';

class AppA extends React.Component {
  render() {
    return (
      <div>
     <Style>
          {`
      .someClass {
          font-size: small;
          font-family: arial;
          background: #f1f1f1;
        }
      h1 {
          font-size: large;
          color: red
      }
      input[type=text] {
        width: 50%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
      }
         `}
        </Style>
        <h1> Component A this defualt style for h1 red</h1>
        <input type='text' defaultValue='ss' />  
      </div>
    )
  }
}
export default AppA

Afin d'appliquer le style à tous vos composants, vous devez déplacer l'élément Style vers votre composant principal.J'ai fait un exemple sur CodeSandbox

Edit React-router-dom with style-it

0
Liam

Vous pouvez essayer comme ça

//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 >
0
Prabhu