将 Mantine 样式覆盖为仅一个元素

Question

在我的 React 项目中，我使用 Mantine 的 库 accordion in 两个不同的组件：Search.jsx 和 Profile.jsx.

关键是我只需要在配置文件中准确自定义它的样式，所以我检查了元素，发现默认的Mantine的class被命名为mantine-bgzycs。我在 Profile.css 中对 class 应用了样式，它按我想要的方式工作。

问题是也会影响搜索的手风琴元素。

当我检查时，我还可以看到 Mantine 的默认 ID，但它会发生动态变化。我尝试用 div 包含元素并应用样式，但其中大部分都被 Mantine 覆盖了。

问题：

有没有一种方法可以只将样式应用到同一元素的一个元素class？

有没有办法限制 React 组件之间的样式？

有没有办法访问 Mantine 的源代码并准确编辑元素样式？

非常感谢！

Answer 1

实现目标的方法不止一种。 Styles API pane of the Accordion documentation and in the Theming documentation under create styles and Styles API

中记录了我的首选方法

这是一个例子：

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

将 Mantine 样式覆盖为仅一个元素

Override Mantine styles to only one element

javascript

twitter-bootstrap

reactjs

antd

mantine