如何使用Modular CSS为Material UI TextField组件设置样式？

问题原因 #

Material UI的outlined变体TextField，实际承载边框样式的是组件内部的.MuiOutlinedInput-notchedOutline元素，你当前只给组件根元素设置border-color，不会作用到内部的边框元素上，因此修改不生效。

解决方法 #

只需要修改你的Styles.module.css代码，调整选择器命中内部边框元素即可，JS代码无需改动：

.formInput {
    font-size: 18px !important;
    font-family: Roboto, serif !important;
    color: #057FA8 !important;
}

/* 命中默认状态下的边框元素 */
.formInput .MuiOutlinedInput-notchedOutline {
    border-color: #057FA8 !important;
}

/* 命中hover状态下的边框元素 */
.formInput:hover .MuiOutlinedInput-notchedOutline {
    border-color: #057FA8 !important;
}

/* 可选：如果需要修改聚焦状态的边框，可添加以下样式 */
.formInput .Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #057FA8 !important;
}

内容的提问来源于stack exchange，提问作者sunbeam