He visto en gran parte del código MUI que usan pseudoselectores en sus componentes de estilo de reacción. Pensé que intentaría hacerlo yo mismo y no puedo hacerlo funcionar. No estoy seguro de lo que estoy haciendo mal o si esto es posible.
Estoy tratando de hacer algo de CSS que compense este elemento con el encabezado fijo.
import React from 'react'; import { createStyles, WithStyles, withStyles, Typography } from '@material-ui/core'; import { TypographyProps } from '@material-ui/core/Typography'; import GithubSlugger from 'github-slugger'; import Link from './link'; const styles = () => createStyles({ h: { '&::before': { content: 'some content', display: 'block', height: 60, marginTop: -60 } } }); interface Props extends WithStyles<typeof styles>, TypographyProps { children: string; } const AutolinkHeader = ({ classes, children, variant }: Props) => { // I have to call new slugger here otherwise on a re-render it will append a 1 const slug = new GithubSlugger().slug(children); return ( <Link to={`#${slug}`}> <Typography classes={{ root: classes.h }} id={slug} variant={variant} children={children} /> </Link> ); }; export default withStyles(styles)(AutolinkHeader);Descubrí que el atributo de contenido debía estar entre comillas dobles así
const styles = () => createStyles({ h: { '&::before': { content: '"some content"', display: 'block', height: 60, marginTop: -60 } } });y luego todo funcionó como se esperaba
Como dijo @Eran Goldin, verifique el valor de su propiedad de content y asegúrese de que esté configurado en una cadena "" . Lo más probable es que estés haciendo algo como esto:
'&::before': { content: '', ... } Lo que no establece la propiedad de content en absoluto en la hoja de estilo de salida
.makeStyles-content-154:before { content: ; ... }En el objeto de estilo Material-UI, el contenido de la cadena es el valor css, incluidas las comillas dobles, para arreglarlo simplemente escriba
'&::before': { content: '""', // "''" will also work. ... }