How to convert CSS with properties to MaterialUI Styles in ReactJS

Question

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.

Answer 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