如何解决后代选择器忽略样式 - JSS
我想在 JSS 中使用后代选择器来为所有具有特定样式的后代元素和具有另一种样式的后代输入元素设置样式,但它不起作用。
一开始我以为是语法问题,但是我看了这个article,语法和我代码中的一样。
在那之后,我试图从我的后代元素中删除类,因为我认为继承和样式优先级有问题,但它也不起作用。
这是我的代码: 反应:
...
<div className={addProductContainer}>
<div className={inputsContainer}>
<input
onChange={onNewItemNameChange}
value={newItem.name}
// className={productInput}
type="text"
/>
<input
onChange={onNewItemAmountChange}
onKeyDown={keyDown}
value={newItem.amount}
// className={amountInput}
type="number"
/>
<button onClick={handleSubmit} className={submitBtn}>Add New Product</button>
</div>
</div>
...
和 JSS:
...
inputsContainer: {
width: '100%',height: 80,display: 'flex',alignItems: 'center',justifyContent: 'center',backgroundColor: 'rgb(255,175,1)','& *': {
height: 40,BoxSizing: 'border-Box'
},'& input': {
backgroundColor: 'black',border: 'none',fontFamily: ['Lexend Deca','sans-serif'],width: '40%',padding: 5,borderRadius: [[5,5]],fontSize: '1rem',border: 'none'
},'& input::-webkit-outer-spin-button,&input::-webkit-inner-spin-button': {
'-webkit-appearance': 'none'
}
},// productInput: {
// width: '40%',// padding: 5,// borderRadius: [[5,// fontSize: '1rem',// border: 'none'
// },// amountInput: {
// '-moz-appearance': 'textfield',// width: 70,// textAlign: 'center',// fontSize: '1.5rem',// border: [[1,'solid','black']],// borderRadius: [[0,5,0]]
// },...
在这里您可以看到我删除了类,并将 productInput
中的所有样式都放到了后代中。上课的时候还好好的,但是作为后代就不行了。
解决方法
试试这个 '& > *'
为所有后代设置样式
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。