Converting CSS properties to MaterialUI Styles in ReactJS: A step-by-step guide

Question

Converting CSS properties to MaterialUI Styles in ReactJS: A step-by-step guide

In my CSS, I've included the following code:

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

This snippet allows me to display a placeholder inside a content-editable div when it is empty. Since I am using Material-UI Styles, I need to do something similar in my styles:

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

Do you have any suggestions on how I can achieve this? Any ideas would be greatly appreciated.

Thank you.

css reactjs material-ui jss

Answer 1

Answer №1

If you're looking to specify the class directly on the div (editableDiv) or on an ancestor element (container), there are a couple of syntax options available. The key distinction between the two lies in the presence of a 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://codesandbox.io/s/inspiring-forest-s6x7i?fontsize=14&hidenavigation=1&theme=dark

For further reference, check out this documentation: https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule

Answer 2

If you're looking to specify the class directly on the div (editableDiv) or on an ancestor element (container), there are a couple of syntax options available. The key distinction between the two lies in the presence of a 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://codesandbox.io/s/inspiring-forest-s6x7i?fontsize=14&hidenavigation=1&theme=dark

For further reference, check out this documentation: https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule

Converting CSS properties to MaterialUI Styles in ReactJS: A step-by-step guide

Answer №1

Similar questions

Is your sticky sidebar getting in the way of your footer?

"Encountered a 'net::ERR_HTTP2_PROTOCOL_ERROR' while trying to load a resource for a React app following an upgrade to Visual Studio 2019 version 16.10.0

Trigger the datepicker to open by clicking anywhere within the TextField in MUI

Function that wraps JSX elements with the ability to infer types through generics

How do I remove the scroll bar from the datagrid using Material UI?

Encountering issues while deploying Heroku with React and Next.js

The background colors are not extending to the full width of the screen

What sets apart elevation from z-index in material-ui?

Steps for eliminating double quotes from the start and end of a numbered value within a list

The requested module cannot be located, were you referring to "js" instead?

Tips on emulating typing actions in an input field during a Jest test

Ways to eliminate spacing from a bullet point in a list?

Determine the currently active view on a mobile device

What could be causing the Bootstrap ProgressBar to not show up?

What is the best way to increase the thickness of a word and insert a new line within my string in a React component?

Bootstrap navbar problem: struggling to adjust padding for image and navigation links

What is the best method to override the CSS transition effect with JavaScript?

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

React and Material UI: Ensuring Proper Whitespace Handling in Strings

Is it possible to conceal the controls on the slick carousel?