mzohaibqc / antd-theme-webpack-plugin

A webpack plugin for Dynamic theme generation for Ant Design

Home Page:https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

modal RTL problem

hmz22 opened this issue · comments

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:

Capture