Material-UI React 无法识别 DOM 元素上的 `underlineStyle` 属性

Question

我已按照示例代码对材质 UI TextField 元素的下划线颜色进行样式设置。

http://www.material-ui.com/#/components/text-field

但是，当我尝试添加自己的样式时，react 无法识别此属性。

<TextField type="number" id="Commission" label="Commission" underlineStyle={{borderColor : orange500}} fullWidth /> 

我在 chrome 开发者控制台中收到以下错误消息

warning.js:33 Warning: React does not recognize the `underlineStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `underlinestyle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (created by Commissions)
    in div (created by Commissions)
    in div (created by Commissions)
    in Commissions
    in ReactPlaceholder (created by AsyncFunc)
    in AsyncFunc (created by Route)
    in Route (created by App)
    in div (created by App)
    in main (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by RestrictedRoute)
    in RestrictedRoute (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in MuiThemeProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by MainApp)
    in Switch (created by MainApp)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by MainApp)
    in Provider (created by MainApp)
    in MainApp

npm 查看材质-ui 版本 0.20.0

我已确认 TextField 元素上存在此属性。

我使用的是 Jumbo React 主题，Textfields 的所有下划线颜色默认为紫色。

不知道为什么我的自定义样式没有覆盖TextField 下划线颜色。

Answer 1

在代码中的某处，您将 underlineStyle 属性传递给常规的 DOM element（在本例中为 div）而不是 react 组件

当您使用JSX 渲染常规DOM elements 时，您应该只将有效的DOM attributes 作为props 传递。

这是有效的，因为所有属性都有效DOM attributes

<div className="Bla" id="x" style={{color: 'red'}}>
  ...
</div>

这是无效的，因为myOwnCustomProp 不是有效的DOM attribute

<div myOwnCustomProp='I should not be here'>
  ...
</div>

这不是错误，只是后来 React 版本中引入的警告。 更多信息here

Answer 2

在 Material-UI v5 中，如果您使用 styled() 函数创建自定义组件，则在使用自定义道具时可能会遇到此问题。要解决这个问题，您需要覆盖 shouldForwardProp 回调并过滤掉不应传递给 DOM 元素的道具：

const Div = styled("div", {
  shouldForwardProp: (props) =>
    props !== "bgColor" && props !== "width" && props !== "height"
})((p) => ({
  backgroundColor: p.bgColor,
  width: p.width + "px",
  height: p.height + "px"
}));

export default function Why() {
  return (
    <>
      <Div width={30} height={30} bgColor="purple" />
      <Div width={60} height={60} bgColor="blue" />
      <Div width={120} height={120} bgColor="green" />
    </>
  );
}

现场演示