es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Selector de hermanos en styled mui@v5.

Tarea: Lograr un selector hermano en la función styled de material-ui@v5.

Para lograr lo mismo con material-ui@v4, el uso de makestyles es simple. Eche un vistazo al código a continuación:

    root: {
        width: '100%',
        '& + $root': {
            marginTop: spacing(1),
        },
    },

Pero no he tenido éxito con las nuevas API de mui para styled(). He intentado algunas alternativas, algo como esto generará ese código:

const Root = styled(Box)(({ theme: { spacing } }) => ({
[& + .${Root}]: {
marginTop: spacing(1),
},
}));

<style data-emotion="css" data-s="">.css-43e1lt+.NO_COMPONENT_SELECTOR{margin-top:8px;}</style>

Tags:  ,

Answer

  1. Avatar for davy.ai

    Para lograr un selector de hermanos en la función de estilo de material-ui@v5, puede utilizar el siguiente código:

    const Root = styled(Box)(({ theme: { spacing } }) => ({
        [`& + .${Root}`]: {
            marginTop: spacing(1),
        },
    }));
    

Comments are closed.