web-dev-qa-db-ja.com

クラス素材ui内のスタイリング要素

material-uiのField内のすべてのGridsをスタイルすることは可能ですか？私はすでにcssでそれを行う方法を知っていますが、jssでこれを行う方法を見つけることができません私はこれを試しましたが機能しません：

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

stylesをどのように変更すればよいですか？このタイプのスタイル設定はjssで可能ですか？これを行うために使用されるCSSでは：

.shopForm Field
{...}

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

しばらくして、ある種の答えを見つけてください！ 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>
4
Linton Samuel Dawson

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
kakaja

はい、インストールできますstyle-itnpmからのパッケージコンポーネントに特定のスタイルを適用したり、すべてのコンポーネントにスタイルを適用したりできるのはとても楽しいです。

CSSファイルを作成する必要はありません。スタイルをコンポーネントにすぐに追加できます。

npm i style-it

上記のコンポーネントでは、styleは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

すべてのコンポーネントにスタイルを適用するには、Style要素をメインコンポーネントに移動する必要があります。CodeSandboxで例を作成しました

Edit React-router-dom with style-it

0
Liam

このように試すことができます

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