Reactjs 如何在样式化组件中重写材质ui的嵌套类？ 方法1： const StyledTextField=styled（（{…rest}）=>( ))` 罗氏根{ .$Doutline{ 边框颜色：红色； } } 背景：#fff； 边界半径：4px； 颜色：#808080； 高度：53px； `; 方法2： const StyledTextField=styled（OutlinedInput）.attrs({ 类：{root:'outlinedRoot'，NotchDoutLine:'NotchDoutLine'} })` 罗氏根{ .多特林{ 边框颜色：红色； } } 背景：#fff； 边界半径：4px； 颜色：#808080； 高度：53px； `;

我也看到了需要添加哪些类，并阅读了相关文章，但我无法覆盖这些内容

---

我尝试了以上两种方法来更改轮廓颜色，但我无法做到这一点

下面是一个这样做的示例。要使用

TextField

而不是

OutlinedInput

，只需在

.muiooutlinedinput root

之前添加一个空格，以便将其作为

TextField

的后代进行匹配，而不是将其作为根元素上的其他类之一进行匹配

.MuiOutlinedInput root

实际上对于样式来说是不必要的，除了有助于CSS的特殊性

Method 1:
const StyledTextField = styled(({ ...rest }) => (
  <OutlinedInput {...rest} classes={{ root: 'outlinedRoot' }} />
))`
  .outlinedRoot {
    .$notchedOutline {
      border-color: red;
    }
  }
  background: #fff;
  border-radius: 4px;
  color: #808080;
  height: 53px;
`;

Method 2:
const StyledTextField = styled(OutlinedInput).attrs({
  classes: { root: 'outlinedRoot', notchedOutline: 'notchedOutline' }
})`
  .outlinedRoot {
    .notchedOutline {
      border-color: red;
    }
  }
  background: #fff;
  border-radius: 4px;
  color: #808080;
  height: 53px;
`;

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/OutlinedInput”导入OutlinedInput；
从“样式化组件”导入样式化；
const StyledOutlinedInput=styled（OutlinedInput）`
&.MuiOutlinedInput root.MuiOutlinedInput槽口双线{
边框颜色：绿色；
}
&：hover.MuiOutlinedInput-root.MuiOutlinedInput槽口doutline{
边框颜色：红色；
}
&.MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput-notch-doutline{
边框颜色：紫色；
}
`;
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

有关答案:






下面是一个这样做的示例。要使用
文本字段而不是
OutlinedInput
来完成此操作，只需在
.MuiOutlinedInput root
之前添加一个空格，以便将其作为
文本字段的后代进行匹配，而不是将其作为根元素上的其他类之一进行匹配。
.MuiOutlinedInput root实际上对于样式来说是不必要的，除了有助于CSS的特殊性

Method 1:
const StyledTextField = styled(({ ...rest }) => (
  <OutlinedInput {...rest} classes={{ root: 'outlinedRoot' }} />
))`
  .outlinedRoot {
    .$notchedOutline {
      border-color: red;
    }
  }
  background: #fff;
  border-radius: 4px;
  color: #808080;
  height: 53px;
`;

Method 2:
const StyledTextField = styled(OutlinedInput).attrs({
  classes: { root: 'outlinedRoot', notchedOutline: 'notchedOutline' }
})`
  .outlinedRoot {
    .notchedOutline {
      border-color: red;
    }
  }
  background: #fff;
  border-radius: 4px;
  color: #808080;
  height: 53px;
`;

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/OutlinedInput”导入OutlinedInput；
从“样式化组件”导入样式化；
const StyledOutlinedInput=styled（OutlinedInput）`
&.MuiOutlinedInput root.MuiOutlinedInput槽口双线{
边框颜色：绿色；
}
&：hover.MuiOutlinedInput-root.MuiOutlinedInput槽口doutline{
边框颜色：红色；
}
&.MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput-notch-doutline{
边框颜色：紫色；
}
`;
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

有关答案: