ReactJS material-ui TextField 应用 css

Posted 2023-02-22

【中文标题】ReactJS material-ui TextField 应用 css

【英文标题】：ReactJS material-ui TextField apply css

【发布时间】：2018-04-29 22:54:00

【问题描述】：

我正在使用 Material-ui 和 Reactjs。我想使用 css 在 TextField 上应用一些自定义样式。具体来说，我想在单击输入时更改 TextField 下划线和 TextField 标签的颜色。

我知道我可以将它嵌入到组件中，但我想使用 className 和 css。

有什么想法吗？

谢谢

【问题讨论】：

寻找styled-components。

您使用的是哪个版本的material-ui？如果您使用的是 v1，那么您可以查看此示例 material-ui-next.com/demos/text-fields

@talentedandrew 我正在使用 0.19.4

@talentedandrew 这种情况下，我宁愿等到material-ui v1 alpha版本出时

【参考方案1】：

由于material-ui 在 JS 中使用内联样式，通过 css 类对组件进行自定义样式不是很方便和容易，但使用!important 关键字仍然可以。

首先你需要给TextField添加cutom css类：

<TextField
  id="text-field-default"
  className="text-field-custom"
  defaultValue="Default Value"
/>

然后，例如，可以像这样覆盖下划线样式：

.text-field-custom>input:focus+div>hr 
  border-bottom: 2px solid rgb(0, 0, 0) !important;