Блог

Я не совсем понимаю, как настраивать компоненты MaterialUI. После прочтения dos https://material-ui.com/customization/components/ Я понимаю, как настроить использование classes и className . Я не понимаю продвинутых методов — действительно сбивает с толку.

Вот пример, который я нашел в codesandbox по настройке текстовых полей https://codesandbox.io/s/6rx8p?file=/demo.tsx:842-858

например

 const CssTextField = withStyles({
  root: {
    'amp; label.Mui-focused': {
      color: 'green',
    },
    'amp; .MuiInput-underline:after': {
      borderBottomColor: 'green',
    },
    'amp; .MuiOutlinedInput-root': {
      'amp; fieldset': {
        borderColor: 'red',
      },
      'amp;:hover fieldset': {
        borderColor: 'yellow',
      },
      'amp;.Mui-focused fieldset': {
        borderColor: 'green',
      },
    },
  },
})(TextField);
 

Из приведенного выше примера, где находится свойство fieldset . Я не вижу нигде в документе о реквизите fieldset . Даже просматривая инструменты разработчика Chrome, я не вижу, откуда взялось это свойство.

Как вы определяете, какое свойство что делает. Есть ли простой способ понять это на каком-нибудь примере.

Есть ли учебник, который я могу пройти?

fieldset это не свойство TextFields, а html-тег другого компонента. если вы проверите в Chrome Dev tools, вы можете найти <fieldset> какой-нибудь класс css.

TextFields состоит из других более мелких компонентов, поскольку вы можете проверять текстовые поля — компоненты. fieldset происходит из небольшого компонента OutlinedInput. он имеет глобальный класс css MuiOutlinedInput-notchedOutline , который вы можете найти в своем списке css.

вы можете проверить реализацию ввода на github. fieldset происходит из NotchedOutline.js .

Как вы сказали, это не указано в документации. в нем не перечислены элементы тега, составляющие данный компонент. Мне потребовалось некоторое исследование, чтобы копнуть глубже, чтобы выяснить его структуру.

Вы можете использовать TextField props предоставленный на material-ui/core самом деле:-

• InputLabelProps : для нанесения styles на ярлык
• InputProps : для применения styles к самому вводу

это пример этого:-

 import React, { useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { FormGroup, TextField } from '@material-ui/core'

const Demo = () => {
  const classes = useStyles()
  const [name, setName] = useState('')
  
  return (
    <FormGroup>
      <TextField 
        label="Name"
        variant="outlined"
        value={name}
        onChange={(e) => setName(e.target.value)} 
        required
        InputLabelProps={{
          classes: {
            root: classes.textFieldLabel,
            focused: classes.textFieldLabelFocused
          }
        }}
        InputProps={{
          classes: {
            root: classes.textFieldRoot,
            focused: classes.textFieldFocused,
            notchedOutline: classes.textFieldNotchedOutline
          }
        }}
      />
    </FormGroup>
  )
}

export default Demo

const useStyles = makeStyles(theme => ({
  textFieldLabel: {
    // this will be applied when input focused (label color change)
    "amp;$textFieldLabelFocused": {
      color: theme.palette.secondary.main
    }
  },
  textFieldLabelFocused: {},
  textFieldRoot: {
    // this will be applied when hovered (input text color change)
    "amp;:hover": {
      color: theme.palette.secondary.main,
    },
    // this will applied when hovered (input border color change)
    "amp;:hover $textFieldNotchedOutline": {
      borderColor: theme.palette.secondary.main
    },
    // this will be applied when focused (input border color change)
    "amp;$textFieldFocused $textFieldNotchedOutline": {
      borderColor: theme.palette.secondary.main
    }
  },
  textFieldFocused: {},
  textFieldNotchedOutline: {}
}));
 

Вы можете увидеть это в этой рабочей песочнице здесь