Hiding input spinner using styled-component

Question

There are lot of solutions out there to hide the input spinner using css. One of them being:

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

I want to know how I can implement it in styled-component? Thanks

Answer 1

Declare like this:

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

Use like this:

<Input type="number">