我正在使用MUI创建一个表单,默认情况下TextField底部边框是灰色的,焦点为蓝色,然后焦点丢失时再次为灰色。我的目标是使它在填充字段后不会失去蓝色:
我尝试过这样的事情,但没有任何成功。
.MuiInput-underline:after { border-bottom: 2px solid rgb(17, 0, 172); }
4ktjp1zp1#
通过简单地将带有条件样式的sx传递给TextField解决了这个问题。
sx={{ "& .MuiInput-underline::before": textInputValue !== "" ? { borderBottomColor: "blue" } : { borderBottomColor: "grey" }, }}
s3fp2yjn2#
梅v5答案
sx={{ '& .MuiInputBase-root.MuiFilledInput-root:before': { borderBottomColor: 'blue', }, }}
2条答案
按热度按时间4ktjp1zp1#
通过简单地将带有条件样式的sx传递给TextField解决了这个问题。
s3fp2yjn2#
梅v5答案