在我的 React 專案中，我在兩個不同的組件中使用Mantine 的庫手風琴： Search.jsx 和 Profile.jsx。
關鍵是我只需要在 Profile 中準確自定義其樣式，因此我檢查了元素并發現默認 Mantine 的類名為mantine-bgzycs。我將樣式應用于 Profile.css 中的該類，它按我的意愿作業。
問題是對 Search 的手風琴元素也有影響。
當我檢查時，我還可以看到 Mantine 的默認 ID，但它會發生動態變化。我試圖用 div 包含元素并應用樣式，但其中大多數都被 Mantine 覆寫。
問題：
有沒有辦法只將樣式應用于同一類的一個元素？
有沒有辦法限制 React 組件之間的樣式？
有沒有辦法訪問 Mantine 的源代碼并準確地編輯元素樣式？
首先十分感謝！
uj5u.com熱心網友回復：
實作目標的方法不止一種。我的首選方法記錄在 Accordion 檔案的Styles API 窗格和創建樣式和Styles API下的 Theming 檔案中
這是一個例子：
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>
);
}
uj5u.com熱心網友回復：
如果要覆寫任何特定元素的樣式，只需將包裝器 div 添加到具有任何 css 類的元素
<div className="wrapper-btn">
<button className="btn" />
</div>
并設定元素的樣式
.wrapper-btn .btn{
color:#000000
}
它只會覆寫特定元素的樣式
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464169.html
標籤：javascript 反应 推特引导 蚂蚁 曼丁