我如何在 jss

问题描述

我一辈子都搞不清楚。我尝试了无数的事情。我想删除 ios 复选框样式（阴暗奇怪的样式）。

             '&input:checked': {
                "WebkitAppearance": "none","MozAppearance": "none","appearance": "none","borderRadius": "15px","border": "1px dashed #BBB","padding": "10px","lineHeight": "20px","textAlign": "center","background": "transparent","outline": "none"
            }

以及我在网上找到的无数其他东西，似乎没有任何改变。我试过挖掘 jss 示例，但似乎没有人试图尝试更改那些特殊的输入字段（例如 type=text）。

我也尝试使用在线 css -> jss 转换器，输入了有效的 css，转换器为我提供了一种样式：input_type_checked 似乎也没有正确定位任何内容。

这是我的复选框的示例：

<label>
    <input className={classes.checkBox} type="checkBox" checked={check} onChange={() => setCheck(!check)}/>
    <p>A checkBox.</p>
</label>

解决方法

你的意思是这样吗？

//selects the first input type=text
const element = document.querySelector("input[type='checkbox']");

document.querySelector 和 document.querySelectorAll 允许您在 JavaScript 中使用 CSS 选择器。

根据情况，我有两种方法可以做到这一点：

对应用中的所有 checked 输入使用 Global plugin。

const useStyles = createUseStyles({
    // Note: global styles will only work
    // while the containing component is in
    // the component tree. I would suggest
    // using your root component for global
    // styles in most cases.
    '@global': {
        'input:checked': {
            /* STYLES GO HERE */
        }
    }
});

const App = () => {
    // Global styles do not need to have the 
    // class names assigned to a component.
    const classes = useStyles();

    return (
        <div>
            My App with global styles!
        </div>
    )
};

或

将 Nested plugin 用于基于类的方法

const useStyles = createUseStyles({
    check: {
        "&:checked": {
            /* STYLES GO HERE */
        }
    }
});

const MyComponent = () => {
    const classes = useStyles();

    return (
        <div>
            My Component with class based styles!
            <input type="checkbox" className={classes.check} />
        </div>
    )
}

注意：示例使用 React JSS，以切换到材质 UI，将 createUseStyles 替换为 makeStyles；

jss reactjs reactjs reactjs reactjs