我有以下 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