將 Mantine styles 覆蓋為只有一個元素

Question

在我的 React 項目中，我在兩個不同的組件中使用Mantine 的手風琴庫： Search.jsx 和 Profile.jsx 。

關鍵是我只需要在 Profile 中准確自定義它的 styles所以我檢查了這個元素，發現默認的 Mantine 的 class 被命名為mantine-bgzycs 。 我將 styles 應用於 Profile.css 中的 class，它按我想要的方式工作。

問題是對搜索的手風琴元素也有影響。

當我檢查時，我還可以看到 Mantine 的默認 ID，但它會發生動態變化。 我嘗試用 div 包含元素並應用 styles，但其中大部分被 Mantine 覆蓋。

問題：

有沒有辦法將 styles 僅應用於同一 class 的一個元素？

有沒有辦法在 React 組件之間限制 styles？

有沒有辦法訪問 Mantine 的源代碼並准確編輯元素 styles？

首先十分感謝！

Answer 1

實現目標的方法不止一種。 我的首選方法記錄在手風琴文檔的Styles API 窗格和主題文檔中create styles和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>
  );
}