material-ui 텍스트 필드 스타일링 방법

material-ui 텍스트 필드 스타일링 방법

material-ui TextField 컴포넌트를 스타일링하는 방법을 찾고 있습니다.

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
/>

내 클래스는 다음과 같이 생성됩니다.

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
});

텍스트 필드의 색상이 흰색으로 바뀌지 않는 것이 문제입니다.텍스트 필드 전체에 스타일링을 적용할 수 있을 것 같습니다(폭 스타일링 등).문제는 스타일을 체인 아래쪽으로 실제 입력에 적용하지 않는 것이라고 생각합니다.

passing input Props에 관한 다른 답변을 검토했지만 성공하지 못했습니다.

내가 할 수 있는 모든 것을 다 해봤지만 내가 뭘 잘못하고 있는지 아는 사람이 있는지 물어봐야 할 것 같아.

현재 모습

를 추가해야 합니다.InputProps속성을 지정합니다.

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',            
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
    input: {
        color: 'white'
    }
});

JSX:

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
    InputProps={{
        className: classes.input,
    }}
/>

이와는 별도로 여기에 설명된 대로 레이블을 스타일링하거나 재정의를 사용할 수도 있습니다.

이 모든 답변은 Input Props 또는 input Props로 스타일을 만드는 방법을 보여주지만, 그 이유와 작동 원리에 대해서는 아무도 설명하지 않았습니다.Input Props와 Input Props의 차이점에 대해서는 아무도 설명하지 않았습니다.

<TextField    
    variant="outlined"
    // inputProps are used to pass attributes native to the underlying 
    // HTML input element, e.g. name, id, style.
    inputProps={{
      style: { textAlign: 'center' },
    }

    // InputProps (capital I) passes props to the wrapper Material 
    // component. Can be  one of the following: Input, FilledInput, 
    // OutlinedInput. You can pass here anything that the underlying
    // Material component uses: error, value, onChange, and classes.
    InputProps={{
       // Usually you don't need className, the `classes` object will
       // be sufficient. However, you can also use it and this will
       // add your class to the div of the InputBase.
       className: styles.slider_filter_input, 
       classes: {
          root: classes.root
          focused: classes.focused
          // The list of keys you pass here depend on your variant
          // If for example you used variant="outlined", then you need
          // to check the CSS API of the OutlinedInput.
       }
    }}
/>

여기 위의 아이디어를 보여주는 작업 코드와 상자가 있습니다.

인라인 스타일을 사용하는 솔루션은 다음과 같습니다.

<TextField
    style={{
        backgroundColor: "blue"
    }}
    InputProps={{
        style: {
            color: "red"
        }
    }}
/>

테마에 맞게 스타일을 유지하는 것이 좋습니다.

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        background: "#fff",
      },
    },
  },
});

당신이 정확히 무엇을 바꾸려고 하는가에 달려있습니다.

이 문서에는 커스텀 TextFields에 관한 예가 다수 기재되어 있습니다.이러한 예는, 여기를 참조해 주세요.

https://material-ui.com/demos/text-fields/ # 커스터마이즈 완료

커스터마이즈의 상세한 것에 대하여는, 다음의 URL 를 참조해 주세요.

https://material-ui.com/customization/overrides/

그리고.

https://material-ui.com/customization/themes/

색상변화에 !important를 사용해 본 적이 있습니까?텍스트 필드의 테두리에 기본 색상을 설정하려고 했을 때도 같은 문제가 발생했습니다.

여기를 봐주세요.https://stackblitz.com/edit/material-ui-custom-outline-color

계층 내 모든 하위 요소에 스타일을 전달할 수 없습니다.

TextField > Input > input (HTML element)

의 위아래 대소문자에 주의해 주세요.InputProps대.inputProps

// pass styles (or props) to the Input component 
<TextField InputProps={{className: classes.input}} />

// pass styles (or props) to the inner input element 
<TextField inputProps={{className: classes.input}} />

<TextField
          color="whitish"
          label="Enter Your Name"
          type="Text"
          InputLabelProps={{
            style: { color: "white" },
          }}
          sx={{
            ".css-x2l1vy-MuiInputBase-root-MuiOutlinedInput-root": {
              color: "white",
            },
          }}
          InputProps={{
            sx: {
              ".css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                border: "2px solid white",
              },
              "&:hover": {
                ".css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                  border: "2px solid white",
                },
              },
            },
          }}
          size="medium"
          variant="outlined"
          fullWidth
          value={name}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />

on_hover, color, border TextField 사용자 정의

를 사용해 보세요.inputStyle을 떠받치다.TextField의사로부터...

inputStyle(개체) - TextField 입력 요소의 인라인 스타일을 재정의합니다.multiLine이 false인 경우: 입력 요소의 스타일을 정의합니다.multiLine이 참일 경우: 텍스트 영역의 컨테이너 스타일을 정의합니다.

<TextField inputStyle={{ backgroundColor: 'red' }} />

MUI V5에서는 sx 프로펠러를 사용하여 스타일 설정을 변경할 수 있습니다.이러한 소품을 입력 필드에 전달하려면 inputProps를 사용해야 합니다.다음과 같이 할 수 있습니다.

              <TextField
                sx={{ marginTop: 10 }}
                inputProps={{ sx: {color: '#fff'} }}  
              />

MUI V5의 SX 프로펠러

대신 컴포넌트를 사용해 보십시오.TextField을 사용할 수

style={{color: 'white' }}

이렇게 하면 자리 표시자 텍스트도 밝아집니다...만세!

텍스트 필드에 클래스 이름을 지정합니다.

            <TextField
            className={styles.search_bar}
            autoComplete={"off"}
            InputProps={{
              endAdornment: (
                <Box className={'search_icon_container'} component={"span"}>
                <IconButton>
                  <CiSearch fontSize={icon_default_size} />
                </IconButton>
                </Box>
              ),
            }}
            size={"small"}
            placeholder="Search"
          />

이것은 CSS 파일로 실행합니다.

.search_bar div{
   border-radius: 25px;
   width: 45vw;
   padding-right: 0;
}

효과가 있었습니다. :) 출력

언급URL : https://stackoverflow.com/questions/46966413/how-to-style-material-ui-textfield