我正在try 查找需要重写哪个类来修改组件的条形图 colored颜色 : 以下是我的代码:

            <Input
              id="email"
              type="email"
              placeholder="Enter your email"
              className='mr-10'
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />

结果是:

enter image description here

我想要做的是编辑底部条的 colored颜色 .

enter image description here

有谁知道我应该在我的SX{{}}props 中添加哪个类来编辑焦点上的 colored颜色 ?

谢谢你的帮助.

推荐答案

你应该用<TextField />来做这个.variantprops 会给你你想要的设计.

<TextField
  variant="standard"
  sx={{
    "& .MuiInput-underline:after": {
      borderBottomColor: "green",
    },
  }}
/>

请注意,还有其他方法,对于styledtheme,这是最快的方法,但可能不是那么可伸缩,所以请参考文档以获取更多样式解决方案.

Ref:
https://mui.com/material-ui/react-text-field/
https://mui.com/material-ui/guides/interoperability/#global-css
https://mui.com/material-ui/customization/theme-components/#global-style-overrides

Reactjs相关问答推荐

Inbox Enum类型以React组件状态时出现TypScript错误

无法使用#13;或br将新行设置为文本区域'"&"<>

包装组件可以避免子组件重新渲染.?

使用useReducer时,props 未从父级传递给子或孙级

react ';S使用状态不设置新状态

for each 子级加载父路由加载器

Reaction上下文值无法传递给其他组件

使用Next.js和Next-intl重写区域设置

面临 React 模式中点击外部条件的问题

React Context API 在 Next.js 中更改路由时获取默认数据

如何根据用户在react.js中的 Select , Select 多个心形图标?

如何在next.js 13中仅在主页导航栏上隐藏组件?

无法访问 usefocusEffect 中 const 的更新状态

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子?

无法在 reactJS 中使用空包装器 <>

ReactJs 行和列

setState 改变对象引用

React Router 6.4CreateBrowserRouter子元素不显示

如何使用 UseState 正确测试组件

如何不旋转 mui 自动完成弹出图标?