css - 如何在 ReactJS 中将带有属性的 CSS 转换为 MaterialUI 样式
问题描述
我有以下CSS:
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text)
}
当它没有内容时,它允许在内容可编辑的 div 中显示占位符。我正在使用 Material-UI 样式,所以我需要类似的东西:
const styles = theme => ({
div[contentEditable=true]:empty:not(:focus):before: {
content:attr(data-text)
}
});
我怎么能做到这一点?任何想法?
谢谢你。
解决方案
下面是几个语法选项,具体取决于您是要直接在 div ( editableDiv
) 上还是在祖先元素 ( container
) 上指定类。两者之间的唯一区别是&
定位后代时的空格。
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
container: {
"& [contentEditable=true]:empty:not(:focus):before": {
content: "attr(data-text)"
}
},
editableDiv: {
"&[contentEditable=true]:empty:not(:focus):before": {
content: "attr(data-text)"
}
}
});
function App() {
const classes = useStyles();
return (
<div>
<div className={classes.container}>
<div contentEditable data-text="Click here to edit div 1" />
<div contentEditable data-text="Click here to edit div 2" />
</div>
<div
className={classes.editableDiv}
contentEditable
data-text="Click here to edit div 3"
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
相关文档:https ://cssinjs.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule
推荐阅读
- arrays - PowerShell - .count() 不适用于字符串数组
- reactjs - React Navigation 5.x:跨材质顶部选项卡共享来自单个 API 调用的数据
- apache-spark - Spark google Bigquery 表数据框不返回任何行并且为空。但是,printSchema 返回元数据信息
- python - 如何按一列分组并获取另一列熊猫中的所有常见值
- javascript - 在Angular中触发消息事件后如何断开和连接socket.io
- javascript - Babylon.js 加载屏幕更改图像
- postgresql - 使用 Dart/Flutter Postgres 包存储日期和空日期需要两个单独的命令
- c - 何时以及如何在 sizeof 表达式中评估 VLA?
- reactjs - 获取 React 的开发版本以使用 NGINX 与后端通信
- r - 附加 rstan 包时出错:找不到入口点