如何在样式组件中覆盖嵌套的 material-ui 类？答案

【问题标题】：How do I over write nested classes of material-ui in styled-components?如何在样式组件中覆盖嵌套的 material-ui 类？
【发布时间】：2020-03-20 20:24:09
【问题描述】：

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;
`;

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

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

【问题讨论】：

标签： reactjs material-ui styled-components

【解决方案1】：

以下是执行此操作的一种方法的示例。要使用TextField 而不是OutlinedInput 执行此操作，只需在.MuiOutlinedInput-root 之前添加一个空格，以便将其匹配为TextField 的后代，而不是将其匹配为根元素上的其他类之一。 .MuiOutlinedInput-root 实际上对于样式来说是不必要的，除了有助于 CSS 的特殊性。

import React from "react";
import ReactDOM from "react-dom";

import OutlinedInput from "@material-ui/core/OutlinedInput";
import styled from "styled-components";

const StyledOutlinedInput = styled(OutlinedInput)`
  &.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
    border-color: green;
  }
  &:hover.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
    border-color: red;
  }
  &.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: purple;
  }
`;

function App() {
  return (
    <div className="App">
      <StyledOutlinedInput defaultValue="My Default Value" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);