如何解决我如何在 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
;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。