Override Mantine styles to only one element-CodePudding

In my React project, I am using Mantine's library accordion in two different components: Search.jsx and Profile.jsx.

The point is I need to accurately customize its styles only in Profile so I inspected the element and discovered that the default Mantine's class is named mantine-bgzycs. I applied styles to that class in Profile.css and it worked as I wanted.

The problem is that affects to Search's accordion element too.

When I inspect I can see also a Mantine's default ID but it changes dinamically. I tried to envolve the elemen with a div and apply styles but most of them are overwritten by Mantine.

QUESTIONS:

Is there a way to apply styles only to one element of the same class?

Is there a way to restrict styles between React components?

Is there a way to access to Mantine's source and edit accurately an element styles?

Thanks very much in advance!

CodePudding user response：

if you want to override style for any specific element, simply add wrapper div to the element with any css class

<div className="wrapper-btn">
   <button className="btn" />
</div>

and style the element like

.wrapper-btn .btn{
color:#000000
}

and it will override style for specific element only

CodePudding user response：

There is more than one way to achieve what you're after. My preferred approach is documented in the Styles API pane of the Accordion documentation and in the Theming documentation under create styles and Styles API

Here's an example:

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>
  );
}