只将Mantine样式重写为一个元素

Question

在我的React项目中，我使用了库手风琴在中的两个不同的组件：Search.jsx和Profile.jsx。

重点是，我只需要在Profile中准确地自定义它的样式，所以我检查了元素，发现默认的类名为mantine。我在Profile.css中将样式应用于该类，它按我的意愿工作。

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

当我检查的时候，我也可以看到一个门庭的默认ID，但是它会发生巨大的变化。我试着用div和应用样式来转移elemen家族，但是他们中的大多数都是被曼汀所覆盖的。

问题：

是否有一种方法只将样式应用于同一类的一个元素？

是否有一种方法可以限制组件之间的样式？

是否有一种方法可以访问门庭的源代码并准确地编辑元素样式？

非常感谢提前！

Answer 1

要达到你想要的目标，有不止一种方法。我喜欢的方法记录在手风琴文档的样式API窗格中，以及创建样式和样式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>
  );
}