我有以下 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 https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)