In my React project, I am using Mantine's library accordion in two different ponents: 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 ponents?

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

Thanks very much in advance!

In my React project, I am using Mantine's library accordion in two different ponents: 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 ponents?

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

Thanks very much in advance!

• javascript
• reactjs
• twitter-bootstrap
• antd
• mantine

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Apr 2, 2022 at 4:01

2 Answers 2

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

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

You can override object in a variable. Use MantineThemeOverride type - see docs.

For example override Text ponent:

const ponentsOveride:MantineThemeOverride["ponents"] = {
  Text: {
    styles: (theme, params, { variant }) => ({
      root:{
        fontSize: variant ==="heading" ? "32px":"16px"
      }
    }),
  },
  }


  export const theme:MantineThemeOverride = {
    ponents: ponentsOveride,
    fontFamily: "var(--font-inter)",
    colorScheme: "light",
    primaryColor: "primary",
    primaryShade: 5,
  }

App with MantineProvider:

export default function App({children}:{children: React.ReactNode}){

  return(<MantineProvider theme={theme}>{children}<?MantineProvider>)
}