如何使用styled-components修改Material UI Input组件的样式？

解决方案 #

只需修改InputContainer的样式规则即可实现你的两个需求，修改后的代码如下：

const InputContainer = styled(Input)`
    width: 350px;
    height: 42px;
    border-radius: 2px;
    border: 1px solid #c0c0c0;

    /* 1. 自定义placeholder字号 */
    &::placeholder {
        font-size: 14px; // 按需调整为你需要的字号即可
    }

    /* 2. 移除hover、聚焦状态的默认底部边框 */
    &::before,
    &::after {
        display: none !important;
    }

    // （可选）如果需要自定义hover、聚焦时的整体边框效果，可追加以下规则
    &:hover {
        border-color: #888;
    }
    &:focus-within {
        border-color: #2196f3;
    }
`;

规则说明

• MUI Input组件的placeholder样式可直接通过::placeholder伪类选择器覆盖，字号、颜色、字重等属性都可自定义
• 组件默认的底部下划线由:before（hover状态）和:after（focus激活状态）两个伪元素渲染，直接隐藏这两个元素即可完全移除默认的底部边框效果，不需要单独针对hover、focus写状态监听

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