【发布时间】：2021-02-24 09:28:41
【问题描述】：
我想使用带有 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, 0, 0, 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, 0, 0, 5]],
// fontSize: '1rem',
// border: 'none'
// },
// amountInput: {
// '-moz-appearance': 'textfield',
// width: 70,
// textAlign: 'center',
// fontSize: '1.5rem',
// border: [[1, 'solid', 'black']],
// borderRadius: [[0, 5, 5, 0]]
// },
...
在这里你可以看到我删除了类，并将所有样式从productInput 放到后代中。上课的时候还可以，但是作为后代就不行了。
【问题讨论】：
-
我无法复制它。你能分享一个可运行的例子，它失败了吗？
-
@JosefWittmann 对不起，我不能和你分享整个工作代码:(你能创建一个小的工作示例吗？我会很感激的 :)
-
您可以尝试自己复制它。创建一个最小的例子，它失败了。如果它没有失败，它会帮助你调试东西。
标签： javascript css reactjs object jss