Reactjs material-UI TextField 应用css属性答案

【问题标题】：Reactjs material-UI TextField apply css propertiesReactjs material-UI TextField 应用css属性
【发布时间】：2021-02-05 10:29:57
【问题描述】：

我有一个类似的 login page 用 Material-UI 制作，但在我的代码中与原始代码存在差异。实际上，当我单击 TextField 时，问题就开始了。将显示旧输入，我选择其中一个，TextField 的背景变为白色。另外，如果第一次进入登录页面时chrome上存有密码，它会通过自动填充自动将背景设为白色。我的登录页面主题很暗，看起来很糟糕。如何使 textField 背景与 Material-UI 登录页面相同？

这是我的代码部分：


const CssTextField = withStyles({
  root: {
    '& .MuiInput-underline:after': {
      borderBottomColor: 'yellow',
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white',
      },
      '&:hover fieldset': {
        borderColor: 'white',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'yellow',
      },'&.Mui-focused ': {
        
      },
    },
  },
})(TextField);

export default function SignIn(props) {


  return (
 <form className={classes.form} noValidate>
          <CssTextField
            focused={true}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="userName"
            name="text"
            type="text" 
            {...username}
            autoComplete="text"
            autoFocus
            InputLabelProps={{
              style: { color: '#fff' },
            }}
            InputProps={{
              style: {
                  color: "red"
              }
          }}
          
          />
    </form>
)


}

看起来像这样：

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这是解决方案：

const styles = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<CssTextField inputProps={{ style: inputStyle }} />

请记住，在 material-ui 中 inputProps 和 InputProps 是有区别的。大写的 I 改变了组件，包裹在原生输入周围，小写的 i 操作原生输入。

【讨论】：