时间戳

首页 > 解决方案 > 样式材质 UI 文本字段

reactjs - 样式材质 UI 文本字段

问题描述

我正在尝试设置 material-ui 文本字段的样式，但我没有让它按我想要的方式工作。我只想要一个带有标准 MUI 动画的简单的白色输入字段。我希望文本字段始终具有白色背景和黑色文本。

您可以在 Code Sandbox 上找到代码：https ://codesandbox.io/s/material-demo-2coo8?fontsize=14&hidenavigation=1&theme=dark

提前致谢！

标签： reactjsmaterial-ui

解决方案

您可以使用以下代码自定义 TextField 字体和背景颜色的样式：

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiInputBase-root": {
      color: 'black' //or try theme.palette.primary.main
      backgroundColor: 'white' //It should be white by default
    }
  }
}));

然后只需将“根”类添加到您的 TextField。作为信息，上述语法称为JSS。.MuiInputBase-root 是一个应用于输入组件的类，它是TextField 的一个子组件。 本文探讨了打开开发工具的 TextField 组件，因此您可以了解子组件如何工作并通过 MUI 设置样式。

关于 JSS 语法的另一条信息。注意“&”和“.”之间的“空格”。这个空间很重要，并且是选择器的一部分，并告知.muiinputbase-root类是在接收“ root”类样式的父母的子部分上。

推荐阅读