0

Tengo un pequeño problema con este complemento que es ant desing. Cuando estoy usando el menu, sí me deja cambiar el color del fondo, pero no el color del texto. Al yo querer cambiarlo por medio de las clases, no se aplica.

introducir la descripción de la imagen aquí

El código es este:

  <Menu className="headerCont" mode="horizontal">
        <Menu.Item className='menu-item-cont' key={"1"}>
             <Link to={""} className='menu-item-cont'>Inicio</Link>
        </Menu.Item>
        <Menu.Item className='menu-item-cont' key={"2"}>
             <Link to={"/productos"} className='menu-item-cont'> Productos </Link>
        </Menu.Item>
  </Menu>

Y el código CSS es el siguiente

.headerCont{
    background-color: #171717;
    border: none;
    color: white;
}
.menu-item-cont{
    color: white;
    border: none;
}

Por lo que tengo comprendido, con solo agregar color en mi clase de CSS debería cambiar el color del texto que está adentro de estos, pero no funciona usando clases. ¿Tienen alguna idea o solución para esto?

1
  • Que version de ant design estás usando?
    – Michael
    el 7 feb. 2022 a las 4:26

1 respuesta 1

0

Ant Design es una libreria UI para react, la cual brinda una serie de componentes prediseñados y personalizables, por lo cual debes tener en cuenta que cada librería o framework en algunos casos son implementados y/o personalizados de forma diferente segun la documentacion del mismo.

Ant design usa less como pre compilador de css y webpack como empaquetador.

Existen varias formas con las que puede personalizar un componente de ant Design una de ellas es modificando el siguiente archivo.

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly
+         modifyVars: {// Aquí podrá modificar las propiedades que necesite!!
+           'primary-color': '#1DA57A', 
+           'link-color': '#1DA57A',
+           'border-radius-base': '2px',
+         },
+         javascriptEnabled: true,
+       },
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

nota:

  1. No excluya node_modules/antd cuando use less/loader.
  2. lessOptions el uso se admite en less-loader@6.0.0 .

Otra forma es mediante la Configuración Estática.

import { ConfigProvider } from 'antd';

ConfigProvider.config({
  theme: {
    primaryColor: '#25b864',
  },
});

Para más información de personalización de tema y componentes de ant Design consulte la documentación oficial: personalización de Tema, Config Provider para los componentes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.