styled-components覆盖antD Layout样式

更改antd默认配色

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    //改主题颜色
    // 默认：⬇️
    // @blue-base: #1890ff;
    // @blue-6: @blue-base;
    // @primary-color: @blue-6;
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        "@primary-color": "#51f",
      },
    },
  })
);

​​LayoutStyled.ts​​

import { Layout as AntDLayout, Menu as AntDMenu } from "antd";

export const Layout = styled(AntDLayout)`
  ${themeBackground};
  height: 100vh;
`;

export const Sider = styled(Layout.Sider)`
  ${shadowbox};
  z-index: 3;
  /* 3 比 footer 的2 高，确保不被footer遮盖 */
`;

export const Header = styled(Layout.Header)`
  display: flex;
  z-index: 2;
  ${BetweenCenter};
  ${shadowbox};
`;

export const Content = styled(Layout.Content)`
  position: relative;
  margin: 10px;
  padding: 0;
  display: flex;
`;

​​theme helper​​

import {
  PrimaryColors,
  Primary,
  ActionColors,
  Action,
  TextColors,
  Text,
} from "../theme/colorsHelper";

​​Menu​​

const MenuItemCss = css`
  ${themeBackground};
  display: flex;
  align-items: center;

  &::after {
    border-right-color: ${PrimaryColors(Primary.main)} !important;
  }

  &.ant-menu-item-active,
  &.ant-menu-item-selected {
    ${themePrimaryColor};
    background-color: ${ActionColors(Action.selected)} !important;
  }
`;

export const MenuItem = styled(Menu.Item)`
  ${MenuItemCss}
`;

​​SubMenu​​

const AntdTransition = css`
  transition: 0.3s background ease;
`;

export const SubMenu = styled(AntDMenu.SubMenu)`
  ${themeBackground};
  ${AntdTransition};
  &.ant-menu-submenu-selected {
    ${themePrimaryColor};
  }

  & > .ant-menu-submenu-title {
    display: flex;
    align-items: center;

    &:hover {
      ${themePrimaryColor};
      background-color: ${(props) =>
        props.theme.palette.action.selected} !important;
    }
  }
  .ant-menu-inline {
    ${AntdTransition};
    background-color: transparent !important;
    ${themeFontColor}
  }
  .ant-menu-submenu-arrow {
    color: ${TextColors(Text.primary)};
  }
`;