Css MaterialUI中输入类的边界转换

有人知道如何在MaterialUI中实现输入的边界转换吗

---

到目前为止，我只做了一个底部边框，但不知道如何使底部边框像那样滑动。不幸的是，我还没有通过谷歌找到任何satysfiyng。

我使用了pseudo effect:after为类似的功能实现了一个纯css解决方案，尽管它只适用于“悬停”元素：

输入{ 大纲：0； 边界：无； 宽度：200px； 边框底部：1px纯色灰色； } div{ 位置：相对位置； 宽度：200px； 高度：20px； } 部门：之后{ 内容：； 位置：绝对位置； 宽度：0px； 高度：2倍； 背景：蓝色； 过渡：均为0.5s； 底部：0； 左：50%； } div:悬停：之后{ 宽度：100%； 高度：2倍； 左：0； } 输入：焦点{ 底部边框：2倍纯红； }

---

我使用了pseudo effect:after为类似的功能实现了一个纯css解决方案，尽管它只适用于“悬停”元素：

输入{ 大纲：0； 边界：无； 宽度：200px； 边框底部：1px纯色灰色； } div{ 位置：相对位置； 宽度：200px； 高度：20px； } 部门：之后{ 内容：； 位置：绝对位置； 宽度：0px； 高度：2倍； 背景：蓝色； 过渡：均为0.5s； 底部：0； 左：50%； } div:悬停：之后{ 宽度：100%； 高度：2倍； 左：0； } 输入：焦点{ 底部边框：2倍纯红； }

---

jbutler483的回答对我很有用。 不过我用了聚焦效果

${props => props.isfocused === 'true'
?
':after {' +
'width: 100%;' +
'height: 2px;' +
'left: 0;' +
'}'
: ''}

---

jbutler483的回答对我很有用。 不过我用了聚焦效果

${props => props.isfocused === 'true'
?
':after {' +
'width: 100%;' +
'height: 2px;' +
'left: 0;' +
'}'
: ''}