En mi proyecto React, estoy usando el acordeón de la biblioteca de Mantine en dos componentes diferentes: Search.jsx y Profile.jsx .
El punto es que necesito personalizar con precisión sus estilos solo en Perfil , así que inspeccioné el elemento y descubrí que la clase predeterminada de Mantine se llama mantine-bgzycs . Apliqué estilos a esa clase en Profile.css y funcionó como quería.
El problema es que eso también afecta al elemento de acordeón de Search .
Cuando inspecciono, también puedo ver la ID predeterminada de Mantine, pero cambia dinámicamente. Traté de envolver el elemento con un div y aplicar estilos, pero Mantine sobrescribe la mayoría de ellos.
PREGUNTAS:
¿Hay alguna forma de aplicar estilos solo a un elemento de la misma clase?
¿Hay alguna forma de restringir los estilos entre los componentes de React?
¿Hay alguna forma de acceder a la fuente de Mantine y editar con precisión los estilos de un elemento?
¡Muchas gracias de antemano!
Hay más de una manera de lograr lo que buscas. Mi enfoque preferido está documentado en el panel API de Estilos de la documentación de Accordion y en la documentación de Temas en crear estilos y API de Estilos .
Aquí hay un ejemplo:
import { createStyles, Accordion } from '@mantine/core'; // define custom classes - includes access to theme object const useStyles = createStyles((theme) => ({ item: { backgroundColor: 'red' }, }); function Demo() { const { classes } = useStyles(); return ( <Accordion // apply custom classes to target Styles API properties classNames={{ item: classes.item }}> <Accordion.Item label="Customization"> Blah, blah, blah </Accordion.Item> </Accordion> ); }