reactjs - 如何自定义material-ui TextField输入下划线:after?

Question

我正在使用 Material-ui for React。

我正在尝试自定义当用户单击 Mui <TextField> 时过渡到位的下划线颜色。组件，这是jss注入(inject)以下CSS的结果:

.MuiInput-underline:after {
    border-bottom: 2px solid #303f9f;
}

我已经投资了 styled-components 主题提供商，并且不想引入 MuiTheme 提供商来使用 createMuiTheme和override .

我已经使用 styled-components 来覆盖许多其他 Mui 组件的样式，但无法覆盖 .MuiInput-underline:after使用样式化组件。

我现在尝试使用 Mui 的 withStyles，但不确定确切的样式语义。我使用 InputProps 和类都没有成功。

const styles = theme => ({
  inputProps: {
    underline: {
      '&:after': {
        border: '2px solid red'
      }
    }
  }
});

const MyTextField = props => {
  const { classes, ...rest } = props;

  return (
    <TextField InputProps={{ inputProps: classes.inputProps }} {...rest} />
  );
};

export default withStyles(styles)(MyTextField);

有什么想法吗？谢谢。

Answer 1

以下是如何使用 styled-components 自定义下划线的示例:

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

const StyledTextField = styled(TextField)`
  /* default */
  .MuiInput-underline:before {
    border-bottom: 2px solid green;
  }
  /* hover (double-ampersand needed for specificity reasons. */
  && .MuiInput-underline:hover:before {
    border-bottom: 2px solid lightblue;
  }
  /* focused */
  .MuiInput-underline:after {
    border-bottom: 2px solid red;
  }
`;

export default StyledTextField;

相关答案:

• How can I remove the underline of TextField from Material-UI?
• How do I custom style the underline of Material-UI without using theme?