后代选择器忽略样式 - JSS

编程问答 2022-05-24

问题描述

我想在 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 中的所有样式都放到了后代中。上课的时候还好好的，但是作为后代就不行了。

解决方法

试试这个 '& > *' 为所有后代设置样式

javascriptjssobjectobjectobjectreactjsreactjsreactjsreactjs