How to convert CSS with properties to MaterialUI Styles in ReactJS

问题

I have the following CSS:

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

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?

Thank you.

回答1:

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);

Related documentation: https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule

来源：https://stackoverflow.com/questions/59326571/how-to-convert-css-with-properties-to-materialui-styles-in-reactjs

标签

css

reactjs

material-ui

jss