Material UI - Apply props to pseudo-element - reactjs

Question

import React from "react";
import { Box } from "#material-ui/core";
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
box: {
'&::before': {
content: props => `${props.text}` // should be props.text from <Child /> (i.e. '111')
}
}
});
function Parent() {
return <Child text="111" />
}
function Child(props) {
const { text } = props;
const classes = useStyles({ text });
return <Box className={classes.box} />
}
How can I use props outside of the <Child />? I've tried data attribute but not working either. It seems content in the pseudo element is alittle bit different from other properties

Answer 1

You can pass the props like this:
import React from "react";
import { Box ,Button} from "#material-ui/core";
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
box: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'black',
height: 48,
padding: '0 30px',
'&:hover':{
background:props=>props.hover
}
}
});
function Parent() {
return <Child hover='black' />
}
function Child(props) {
//const props = { hover:'black' };
const classes = useStyles(props);
return <Box className={classes.box}/>
}
In case of the pseudo element ::before the syntax for the content property is a little different. We use additional inverted commas with the single commas like this:
'&::before':{
content:'"Some text"'
}
In case we are passing props it will look like this:
'&::before':{
content:props=>`"${props.content}"`
}
For more info check out material-ui docs

Answer 2

You can pass props through in your useStyles call.
const classes = useStyles({text: 'asdf'})
Usage in your style definition would be something like this
const useStyles = makeStyles({
box: {
'&::before': {
content: (props) => `${props.text}`
}
}
});