Как удалить отступы в меню Ant Design?

Я не могу понять, как сделать так, чтобы текст в моем меню был выровнен по левому краю (необходимо сделать это для выравнивания с другим текстом). На картинке ниже я хочу, чтобы «Один», «Два» и «Три» были полностью слева.

введите здесь описание изображения

Я пробовал установить отступы и поля на 0 везде, где только мог придумать, но безрезультатно:

import React, { Component } from "react";
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class CategoryNav extends React.Component<Props> {
  handleClick = (e: Event) => {
    console.log('click ', e);
  }
  render() {
    return (
      <Menu
        onClick={this.handleClick}
        style={{ width: 256, height: "100%", paddingLeft: 0, marginLeft: 0 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu style={{ paddingLeft: 0, marginLeft: 0 }} key="sub1" title={<span>One</span>}>
          <Menu.Item style={{ paddingLeft: 0, marginLeft: 0 }} key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
          <Menu.Item key="3">Option 3</Menu.Item>
          <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>

        <SubMenu key="sub2" title={<span>Two</span>}>
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
        </SubMenu>

        <SubMenu key="sub4" title={<span>Three</span>}>
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}

export default CategoryNav;

Приведенный выше код представляет собой минимальный пример, немного отредактированный из документации Ant Design Docs.

РЕДАКТИРОВАТЬ: вот скриншот инспектора Chrome:  введите описание изображения здесь

Я добавил собственный класс в свой код React:

    <SubMenu className="categoryNav" key="sub1" title={<span>One</span>}>
      <Menu.Item key="1">Option 1</Menu.Item>

и добавил этот CSS:

.categoryNav .ant-menu-submenu-title {
  padding: 0;
  margin: 0;
}

div.ant-menu-submenu-title {
  padding: 0;
  margin: 0;
}

который, кажется, избавился от правого отступа и верхнего / нижнего поля, но по какой-то причине я просто не могу отказаться от левого отступа.

Как ни странно, инспектор говорит, что левое заполнение происходит от встроенного стиля в "element.styles". Значит ли это, что перезаписать невозможно?


person rampatowl    schedule 26.06.2018    source источник
comment
Вот аналогичный вопрос: stackoverflow.com/questions/48149270/. Вы успешно переопределили стили, как показано, и теперь у вас проблемы с этим, в частности?   -  person Blake Steel    schedule 26.06.2018
comment
Эй, я не знаю, как адаптировать этот ответ к этому делу. Ответ выбирает стиль .ant-collapse-content-box внутри настраиваемого класса. Я не знаю, какой должен быть эквивалентный подкласс. Я также смущен, почему такой вид копания необходим - почему настройка стиля реквизита просто не работает?   -  person rampatowl    schedule 26.06.2018
comment
Инспектор - ваш лучший друг. Осмотрите меню. Кроме того, это связано со спецификой CSS. stackoverflow.com/questions/11529495/   -  person Blake Steel    schedule 26.06.2018
comment
В качестве примечания: использование стиля реквизита не является хорошей практикой (простительно для тестирования, но я не уверен, что вы планируете продолжать использовать его таким образом после тестирования)   -  person Blake Steel    schedule 26.06.2018
comment
Я нашел правильный класс с помощью Inspect, как вы предложили, но, хоть убей, я все еще не могу избавиться от левого отступа! Обновил вопрос скриншотами с новой попытки.   -  person rampatowl    schedule 26.06.2018


Ответы (2)


Вы можете использовать! Important, что не рекомендуется:

.categoryNav .ant-menu-submenu-title {
  padding: 0 !important;
  margin: 0 !important;
}

div.ant-menu-submenu-title {
  padding: 0 !important;
  margin: 0 !important;
}

Используйте это простое, быстрое и грязное решение :)

person August    schedule 26.06.2018

person    schedule
comment
Привет, есть ли документация о том, как настроить стили дизайна муравьев? - person Kaizen Tamashi; 08.10.2019