React Material-UI eliminates the 'content' property from the CSS pseudo-element

Question

React Material-UI eliminates the 'content' property from the CSS pseudo-element

Creating a React MUI Box and styling it like this:

<Box
  id='my-box'
  sx={{
    '&::before': {
      content: 'Yay! ',
      backgroundColor: 'red'
    }
  }}
>Life is beautiful</Box>

However, during runtime, the CSS property content disappears, leaving only background-color. Manually adding content: 'Yay! ' through browser dev tools displays it correctly.

Detailed breakdown:

Screenshot of code:

https://i.stack.imgur.com/DnikJ.png

Incorrect display in the browser:

https://i.stack.imgur.com/YQbJT.png

Inspecting element via dev tools - missing content:

https://i.stack.imgur.com/Xgz5s.png

Manually adding content through dev tools:

https://i.stack.imgur.com/lX0qo.png

Result after manually adding content:

https://i.stack.imgur.com/Basxy.png

How can I prevent the removal of the CSS property content at runtime? And why does this occur initially?

Appreciate any insights. Thank you.

css reactjs material-ui jsx

Answer 1

Answer №1

To properly style the content prop within the sx attribute, you should use both double and single quotes. Here is an example:

<Box
  id="my-box"
  sx={{
    "&::before": {
      content: "'Yay! '",
      backgroundColor: "red"
    }
  }}
>
  Life is beautiful
</Box>

The expected result will look like this:

https://i.stack.imgur.com/ATtVZ.png

You can view the working code on CodeSandbox: https://codesandbox.io/s/friendly-golick-zl6drq?file=/demo.tsx:119-299

(Note that if you don't use quotes as instructed, you may encounter an error message suggesting to include quotes in the 'content' property value.)

Answer 2

To properly style the content prop within the sx attribute, you should use both double and single quotes. Here is an example:

<Box
  id="my-box"
  sx={{
    "&::before": {
      content: "'Yay! '",
      backgroundColor: "red"
    }
  }}
>
  Life is beautiful
</Box>

The expected result will look like this:

https://i.stack.imgur.com/ATtVZ.png

You can view the working code on CodeSandbox: https://codesandbox.io/s/friendly-golick-zl6drq?file=/demo.tsx:119-299

(Note that if you don't use quotes as instructed, you may encounter an error message suggesting to include quotes in the 'content' property value.)

React Material-UI eliminates the 'content' property from the CSS pseudo-element

Answer №1

Similar questions

Struggling to retrieve a single value from my React app using sequelize findbyPk

Repairing the Performance of the 'Save' Feature

Attempting to position an image in the middle-right of a column using bootstrap

Transferring information between Express and React through the Contentful API

Navigating through objects to retrieve internal object values

I am attempting to incorporate a data layer into kepler.gl using react, however, the data layer is not appearing

Troubleshooting Material-UI: The Mystery of the Missing Dialog

Are there any extensions in VS Code that can identify all files that are importing the current file?

Resolving type error issues related to using refs in a React hook

Exploring the effectiveness of React Hook Form using React Testing Library

Unable to display complete content of Ionic 3 webpage

Every time I attempt to set up Material-UI, a barrage of errors is thrown my way, making the installation process frustrating

What is the reason for the index.html file not connecting to the local .css files and .js file?

Show the table within the flex container

When attempting to shift the label above the input field upon focusing, it unexpectedly becomes concealed

The copying process of the React App Docker image seems to be dragging on for quite

What's the best way to update the fill color of an SVG dynamically?

The bottom navigation component from material-ui for React JS is experiencing display issues on certain screen sizes

The stature of Bootstrap's columns

Tips for transferring information from Django to React without relying on a database