css 在填充输入时更改MUI TextField的borderBottomColor

4nkexdtk 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(90)

我正在使用MUI创建一个表单，默认情况下TextField底部边框是灰色的，焦点为蓝色，然后焦点丢失时再次为灰色。我的目标是使它在填充字段后不会失去蓝色：

我尝试过这样的事情，但没有任何成功。

.MuiInput-underline:after {
    border-bottom: 2px solid rgb(17, 0, 172);
}

css

来源：https://stackoverflow.com/questions/72213596/change-borderbottomcolor-of-mui-textfield-when-input-is-filled

2条答案

按热度按时间

4ktjp1zp1#

通过简单地将带有条件样式的sx传递给TextField解决了这个问题。

sx={{
      "& .MuiInput-underline::before":
        textInputValue !== ""
          ? { borderBottomColor: "blue" }
          : { borderBottomColor: "grey" },
    }}

赞(0）回复(0）举报 2023-05-02

s3fp2yjn2#

梅v5答案

sx={{
    '& .MuiInputBase-root.MuiFilledInput-root:before': {
      borderBottomColor: 'blue',
    },
}}

赞(0）回复(0）举报 2023-05-02

我来回答

css 在填充输入时更改MUI TextField的borderBottomColor

2条答案

相关问题

热门标签

最新问答