如何自定义 material-ui TextField 输入框下划线的样式：after？

Question

我正在使用React的Material-ui。

我试图自定义当用户单击Mui <TextField>组件时过渡到位的下划线颜色，这是jss注入以下CSS的结果：

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

我已经使用 styled-components theme provider，不想引入 MuiTheme provider 来使用 createMuiTheme 和 override。

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

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

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

有什么想法吗？谢谢。

- KenB

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;

相关问题:

• 如何从Material-UI中删除TextField的下划线？
• 如何在不使用主题的情况下自定义样式Material-UI的下划线？

- Ryan Cogswell

Answer 2

您需要在样式对象中省略inputProps键。
您还需要为InputProps提供classses Prop：

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

 const MyTextField = props => {
   const { classes, ...rest } = props;
   return (
     <TextField InputProps={{ classes: {underline: classes.underline} }} {...rest} />
   );
 };

您可以查看这个可工作的代码沙箱示例：https://codesandbox.io/s/material-demo-75w7p?fontsize=14

- Ido

Answer 3

这是使用 withStyles 的示例。

const MyTextField = withStyles((theme: Theme) => ({
  root: {
    "& label.Mui-focused": {
      color: theme.palette.primary.dark
    },
    "& .MuiInput-underline:before": {
      borderBottomColor: "green"
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: "green"
    },
    "& .MuiInputBase-root": {
      "& fieldset": {
        borderColor: "red"
      },
      "&:hover fieldset": {
        borderColor: "yellow"
      },
      "&.Mui-focused fieldset": {
        borderColor: theme.palette.primary.main
      }
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: "red"
      },
      "&:hover fieldset": {
        borderColor: "yellow"
      },
      "&.Mui-focused fieldset": {
        borderColor: theme.palette.primary.main
      }
    }
  }
}))(TextField);

https://codesandbox.io/s/material-demo-forked-c2opb?file=/demo.tsx

- Web dozens