Javascript 使用带样式的Styled组件和材质UI的TextField样式

以下是材料界面

TextField

样式，使用材料界面本身的

withStyles

：

export const STextField = withStyles({
  root: {
    background: 'white',
    '& label.Mui-focused': {
      color: 'white'
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'white'
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white'
      },
      '&:hover fieldset': {
        borderColor: 'white'
      },
      '&.Mui-focused fieldset': {
        borderColor: 'white'
      }
    }
  }
})(TextField);

而且它工作得很好

是否有任何方法可以使用

样式化组件制作相同的样式

我试过这个：

export const STextField = styled(TextField)`
.MuiTextField-root {
  background: 'white'
    & label.Mui-focused: {
      color: 'white'
    },
    & .MuiInput-underline:after: {
      borderBottomColor: 'white'
    },
    & .MuiOutlinedInput-root: {
      & fieldset: {
        borderColor: 'white'
      },
      &:hover fieldset: {
        borderColor: 'white'
      },
      &.Mui-focused fieldset: {
        borderColor: 'white'
      }
}
`;

但它的风格不同

我可能会错过一些额外的语法，任何帮助感谢
 下面的示例显示了使用
样式化组件的等效组件的正确语法

它修复了以下语法问题：

您不需要用
.MuiTextField root{…}
包围样式。根级别是应用样式化组件的类名的级别。使用
.MuiTextField root{…}
包围样式将导致它无法工作，因为它将使用该类查找TextField根元素的后代（但该类位于TextField根元素本身）


在为样式化组件提供模板文本时，需要使用CSS语法而不是JS对象语法。这意味着：


没有
：
在样式规则的括号之前
颜色字符串周围没有引号
white
对于JS对象，将CSS属性名称与破折号一起使用，而不是camelCase版本（例如，
border color
而不是
borderColor
）


从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/styles”导入{withStyles}”；
从“样式化组件”导入样式化；
const with stylestextfield=with styles({
根目录：{
背景：“白色”，
“&label.Mui聚焦”：{
颜色：“白色”
},
“&.MuiInput下划线：之后”：{
边框底部颜色：“白色”
},
“&.muioOutlinedInput根”：{
“&字段集”：{
边框颜色：“白色”
},
“&：悬停字段集”：{
边框颜色：“白色”
},
“&.Mui聚焦字段集”：{
边框颜色：“白色”
}
}
}
})（文本字段）；
const StyledTextField=styled（TextField）`
背景：白色；
&label.Mui-focused{
颜色：白色；
}
&.MuiInput下划线：在{
边框底色：白色；
}
&.MuiOutlinedInput根{
&字段集{
边框颜色：白色；
}
&：悬停字段集{
边框颜色：白色；
}
&.Mui聚焦字段集{
边框颜色：白色；
}
}
`;
导出默认函数App（）{
返回(


);
}


import React from "react";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
import styled from "styled-components";

const WithStylesTextField = withStyles({
  root: {
    background: "white",
    "& label.Mui-focused": {
      color: "white"
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: "white"
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: "white"
      },
      "&:hover fieldset": {
        borderColor: "white"
      },
      "&.Mui-focused fieldset": {
        borderColor: "white"
      }
    }
  }
})(TextField);

const StyledTextField = styled(TextField)`
  background: white;
  & label.Mui-focused {
    color: white;
  }
  & .MuiInput-underline:after {
    border-bottom-color: white;
  }
  & .MuiOutlinedInput-root {
    & fieldset {
      border-color: white;
    }
    &:hover fieldset {
      border-color: white;
    }
    &.Mui-focused fieldset {
      border-color: white;
    }
  }
`;
export default function App() {
  return (
    <div>
      <WithStylesTextField variant="standard" label="standard withStyles" />
      <WithStylesTextField variant="outlined" label="outlined withStyles" />
      <br />
      <StyledTextField variant="standard" label="standard styled-comp" />
      <StyledTextField variant="outlined" label="outlined styled-comp" />
    </div>
  );
}