如何在 ReactJS 中将带有属性的 CSS 转换为 MaterialUI 样式

Posted 2023-02-22

【中文标题】如何在 ReactJS 中将带有属性的 CSS 转换为 MaterialUI 样式

【英文标题】：How to convert CSS with properties to MaterialUI Styles in ReactJS

【发布时间】：2020-04-07 03:25:20

【问题描述】：

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

我怎样才能做到这一点？有什么想法吗？

谢谢。

【参考方案1】：

以下是几个语法选项，具体取决于您是要直接在 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

【讨论】：

谢谢，它正在工作。也谢谢你的文档，我去看看。