antd-theme-webpack-plugin
antd-theme-webpack-plugin copied to clipboard
modal RTL problem
Hi Dear; I have Problem with modal RTL
<ConfigProvider direction="rtl">
...
</ConfigProvider >
this is vars.less:
// This file will contain all varibales, our custom varibales and
//those from Ant Design which we want to override.
@import "~antd/lib/style/themes/default.less";
@primary-color: @blue-6;
@menu-selected-item-bg: @menu-item-active-bg;
:root {
--PC: @primary-color;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: @menu-selected-item-bg;
}
this is config-overrides:
const path = require("path");
const fs = require("fs");
const {
override,
fixBabelImports,
addLessLoader,
addWebpackPlugin,
} = require("customize-cra");
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const { getLessVars } = require("antd-theme-generator");
const themeVariables = getLessVars(
path.join(__dirname, "./src/styles/vars.less")
);
const defaultVars = getLessVars(
"./node_modules/antd/lib/style/themes/default.less"
);
const darkVars = {
...getLessVars("./node_modules/antd/lib/style/themes/dark.less"),
"@primary-color": defaultVars["@primary-color"],
"@picker-basic-cell-active-with-range-color": "darken(@primary-color, 20%)",
};
const lightVars = {
...getLessVars("./node_modules/antd/lib/style/themes/compact.less"),
"@primary-color": defaultVars["@primary-color"],
};
fs.writeFileSync("./src/dark.json", JSON.stringify(darkVars));
fs.writeFileSync("./src/light.json", JSON.stringify(lightVars));
fs.writeFileSync("./src/theme.json", JSON.stringify(themeVariables));
const options = {
stylesDir: path.join(__dirname, "./src"),
antDir: path.join(__dirname, "./node_modules/antd"),
varFile: path.join(__dirname, "./src/styles/vars.less"),
themeVariables: Array.from(
new Set([
...Object.keys(darkVars),
...Object.keys(lightVars),
...Object.keys(themeVariables),
])
),
generateOnce: false, // generate color.less on each compilation
};
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true,
}),
addWebpackPlugin(new AntDesignThemePlugin(options)),
addLessLoader({
javascriptEnabled: true,
})
);
other component work perfectly but modal: