Question

inputFieldTwo

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

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

Answer 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);

如何在样式化组件中过度编写material-ui的嵌套类？

1 个答案: