我有一个相当简单的react组件:
<Quantity type="number" value="1"></Quantity>
使用如下StyledComponents样式设置:
const Quantity = styled.input`
border: 1px solid #000;
border-radius: 2px;
width: 48px;
height: 28px;
font-size: 18px;
text-align: center;
margin-right: 10px
`;
所以现在看起来像这样:
我想使它看起来像这样:
谢谢!
答案 0 :(得分:1)
您可以做的是隐藏默认的递增器按钮,并使用自己的按钮从状态中递增和递减值。
const Quantity = styled.input`
border: 1px solid #000;
border-radius: 2px;
width: 48px;
height: 28px;
font-size: 18px;
text-align: center;
margin-right: 10px
//hide the default button
&::-webkit-appearance: textfield;
&::-moz-appearance: textfield;
appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button
&::-webkit-appearance: none;
`;
const Incrementer = styled.button`
...
`;
const Decrementer = styled.button`
...
`;
...
const [inputValue, setInputValue] = useState(0);
...
<Incrementer onClick={() => setInputValue(inputValue + 1)} />
<Quantity value={inputValue}/>
<Decrementer onClick={() => setInputValue(inputValue - 1)} />