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

Effortlessly glide to a specific div ID upon page load using the URL address

Troubleshooting a Component File Import Issue in ReactJS

How to remove the black border on a material-ui button

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

Overflow error in Rsuite table row cannot be displayed

"Utilizing the power of Twitter Bootstrap and Snap.js for

What is the best way to center the input on the page?

Getting state values from a custom component to another parent component can be achieved by lifting the state up

Having issues running 'npm start' with an outdated version of react

Enhance the appearance of div elements in GWT/HTML with custom styling

Styling a numerical value to appear as currency with CSS

Difficulty with Horizontal Mousewheel Scrolling

Adjust the text size of Twitter Bootstrap on mobile screens

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

The specified number of columns and width values are being disregarded

Issue observed with the functionality of checkAll and uncheckAll after a user interacts with a single checkbox

Using multiple header tags in HTML

Best practices for testing function and internal statement following form submission handler in jest and enzyme for react applications

I encountered an issue while trying to integrate VideoJS with React

The iframe remains unresponsive and fails to resize as needed