将标题的背景颜色更改为 LESS 变量(nextjs + less + antdesign) [英] Change background color of header to LESS variable (nextjs + less + antdesign)

问题描述

假设我有 Header.js

<代码>...const MainHeader = () =>{返回 (<标题><菜单主题=深色"模式=水平"><Menu.Item key=1">nav 1</Menu.Item><Menu.Item key=2">nav 2</Menu.Item><Menu.Item key="3">nav 3</Menu.Item></菜单></标题>);};...

我想改变那个标题的颜色最简单的方法可能是这个

<代码>...const MainHeader = () =>{返回 (<标题样式={{背景:"黑色"}}><Menu style={{background:"black"}} theme="dark"模式=水平"><Menu.Item key=1">nav 1</Menu.Item><Menu.Item key=2">nav 2</Menu.Item><Menu.Item key=3">nav 3</Menu.Item></菜单></标题>);};...

但我想要做的是使用 var.less 中的变量(而不是黑色)，但我找不到如何去做的方法.当然，我可以使用 Header.module.less 创建新类并在 Menu 或 Header 中使用它，但我需要添加 !important 因为否则将使用蚂蚁默认值.或者，如果您知道如何编辑蚂蚁设计的更好方法，请告诉我:)

解决方案

如 文档，你可以通过改变全局变量@layout-header-background 和 @menu-dark-bg 来覆盖样式>

黑暗主题的所有变量都可以找到 这里

Lets say i have Header.js

...
    const MainHeader = () => {
      return (
        <Header>
          <Menu theme="dark" mode="horizontal">
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
      );
    };
...

And i want to change color of that header simplest way is probably this

...
    const MainHeader = () => {
      return (
        <Header style={{background:"black"}}>
          <Menu style={{background:"black"}} theme="dark" mode="horizontal">
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
      );
    };
...

but what i want to do is to use variables (instead of black) from var.less but i cant find a way how to do it. Of course i can use Header.module.less to create new class and use it in Menu or Header but i will need to add !important because otherwise ant defaults will be used. Or if you know any better way how to edit ant design please let me know :)

解决方案

As stated in the documentation, you can override styles by changing global variables @layout-header-background and @menu-dark-bg

All less variables for dark theme could be found here

这篇关于将标题的背景颜色更改为 LESS 变量(nextjs + less + antdesign)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！