반응 MUI로 TextField 구성 요소의 너비를 재정의하려면 어떻게 해야 합니까?

반응 MUI로 TextField 구성 요소의 너비를 재정의하려면 어떻게 해야 합니까?

컴포넌트의 폭을 줄이려고 합니다.

렌더링 방법은 다음과 같습니다.

  render() {
    return (
      <div>
          <div>
            <form onSubmit={this.handleSubmit}>
                <TextField
                  hintText="Email"
                  ref="email"
                /><br/>
                <TextField
                  hintText="Password"
                  type="password"
                  ref="password"
                /><br/>
              <button className="btn btn-success" onClick={this.loginCommand}><i className="fa fa-sign-in"/>{' '}Log In</button>
            </form>
          </div>
      }
      </div>
    );
  }
}

또한 속성을 확인하여 올바르게 설정되었는지 확인할 수도 있습니다.

<TextField
      id="full-width-text-field"
      label="Label"
      placeholder="Placeholder"
      helperText="Full width!"
      margin="normal"
      fullWidth // this may override your custom width
/>

다음과 같이 요소에 인라인 스타일을 지정할 수 있습니다.

  <TextField
        hintText="Email"
        ref="email"
        style = {{width: 100}} //assign the width as your requirement
   />

또는 다음과 같이 할 수 있습니다.

선언하다stylescss 속성을 가진 변수입니다.

var styles = StyleSheet.create({
    textFld: { width: 100, height: 40}   //assign the width as your requirement
});

할당하다style당신의 안에서render코드를 설정합니다.

<TextField
              hintText="Email"
              ref="email"
              style = {styles.textFld}
            />

그게 너한테 맞는지 한번 말해 봐.저도 리액션 처음이에요.

SO에 관한 문서 및 기타 유사한 질문을 참조하여 명확하게 확인할 수 있습니다.http://facebook.github.io/react-native/docs/style.html#content

http://facebook.github.io/react-native/

http://facebook.github.io/react-native/docs/flexbox.html#content

React.js 인라인 스타일의 베스트 프랙티스

의 폭을 부모 폭만큼 넓히는 경우(width: 100%):

<TextField label="Full width" fullWidth />

를 설정하는 경우는,TextField의 폭과 정확한 값:

<Box width={350}>
  <TextField label="width: 350px" fullWidth />
</Box>

의 스타일을 설정할 수도 있습니다.TextField래퍼 컴포넌트를 추가하지 않을 경우 직접 다음을 수행합니다.

V5

<TextField label="width: 350px" sx={{ width: 350 }} />

V4

const useStyles = makeStyles({
  root: {
    width: 350
  }
});

function App() {
  const classes = useStyles();
  return <TextField label="width: 350px" className={classes.root} />;
}

인라인 스타일은 덮어쓰기 어렵기 때문에 다른 답변에서 제시한 인라인 스타일은 사용하지 않는 것이 좋습니다.기본적으로는 재료 UI 스타일이 더 유연하고 재료 UI 구성요소와 더 잘 통합되기 때문에 재료 UI 스타일을 사용해야 합니다.예를 들어, 더 큰 컴포넌트에서 재정의할 하위 컴포넌트를 체리로 선택하거나 인라인 스타일로는 할 수 없는 psuedo 클래스와 요소를 스타일링할 수 있습니다.

라이브 데모

언급URL : https://stackoverflow.com/questions/35093107/how-to-override-the-width-of-a-textfield-component-with-react-mui