使用 styled-component 隐藏输入微调器

Question

有很多解决方案可以使用 css 隐藏输入微调器。其中之一是：

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}

我想知道如何在样式组件中实现它？谢谢

Answer 1

这样声明：

const Input = styled.input`
    ::-webkit-inner-spin-button{
        -webkit-appearance: none; 
        margin: 0; 
    }
    ::-webkit-outer-spin-button{
        -webkit-appearance: none; 
        margin: 0; 
    }    
`;

这样使用：

<Input type="number">

使用 styled-component 隐藏输入微调器

Hiding input spinner using styled-component

css

styled-components