如何在ReactJS中将具有属性的CSS转换为MaterialUI样式 [英] How to convert CSS with properties to MaterialUI Styles in ReactJS

问题描述

我有以下CSS:

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}

允许在没有内容的情况下在内容可编辑的div中显示一个占位符.我正在使用Material-UI样式，因此需要以下内容:

which allows to show a placeholder inside a content-editable div when it has no content. I am using Material-UI Styles, so I need something like:

const styles = theme => ({
  div[contentEditable=true]:empty:not(:focus):before: {
    content:attr(data-text)
  }
});

我该如何实现?有什么主意吗?

How could I achieve this? Any idea?

谢谢.

推荐答案

以下是几个语法选项，具体取决于您是直接在div(editableDiv)还是在祖先元素(container)上指定类. ).两者之间的唯一区别是定位后代时&后的空格.

Below are a couple syntax options depending on whether you want to specify the class directly on the div (editableDiv) or on an ancestor element (container). The only difference between the two is the space after & when targeting descendants.

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-the-parent-rule

这篇关于如何在ReactJS中将具有属性的CSS转换为MaterialUI样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！