在普通 css 上设置 Material-ui TextField 组件的下划线焦点样式答案

【问题标题】：Styling a material-ui TextField component's underlineFocusStyle on normal css在普通 css 上设置 Material-ui TextField 组件的下划线焦点样式
【发布时间】：2018-01-17 14:47:20
【问题描述】：

在 Material-UI 的组件中，您可以为组件本身提供一个样式对象作为 JSX 标记上的属性，但您必须为下划线焦点样式提供一个单独的样式对象。

我的意思是例如 TextField 组件的 underlineFocusStyle。

你可以这样设计：

<TextField hintText="Hint Text" style={{width: '80%'}}
  underlineFocusStyle={{backgroundColor: '#0000FF', height: '2px'}}
/>

现在，如何用普通的 css 编写它。在设置 TextField 组件样式本身的样式之上，该组件的 underlineFocusStyle 的样式？

当然，TextField 的宽度样式应该是：

宽度：100%

但是 underlineFocusStyle 的样式将如何设置？比如：

width: 100&
.underline-focus-style: background-color: #000FF

因为我想给组件一个样式，它必须用 css 编写。谢谢。

【问题讨论】：

标签： css reactjs material-ui inline-styles

【解决方案1】：

您可以将 css 样式应用于 underlineFocusStyle 以及任何 Material-ui 组件。声明一个 const 样式对象并添加您的 CSS，如下所示

const style = {
   "background-color": "#fff", color:"#333"
}

然后将此样式对象传递给 underlineFocusStyle 道具，如下所示

<TextField underlineFocusStyle={style} />

希望这能回答你的问题。

【讨论】：