Как я могу изменить стили для класса .ant-menu-submenu-title, который находится внутри компонента SubMenu, если у меня нет прямого доступа к этому классу? Вот пример класса, который я хотел бы переопределить:
.sub-menu .ant-menu-submenu-title {
display: flex !important;
align-items: center !important;
height: 6rem !important;
background-color: green !important;
}
Попробовав следующий вариант, в котором пытаюсь переопределить класс .ant-menu-submenu-title внутри класса .menu, столкнулся с тем, что переопределение не применяется:
.menu {
.ant-menu-submenu-title {
display: flex !important;
align-items: center;
padding-inline-start: 1rem;
padding-inline-end: 1rem;
height: 6rem;
// background-color: green !important;
}
}
Есть ли у кого-то рабочий пример решения этой проблемы?
Для изменения стилей встроенных классов Antd без применения глобальных стилей, можно использовать CSS модули или scoped CSS. Вот пример использования CSS модулей для переопределения стилей класса .ant-menu-submenu-title внутри компонента SubMenu:
1. Создайте новый файл с расширением .module.css, например submenuStyles.module.css, и добавьте следующий код:
```css
.menu .ant-menu-submenu-title {
display: flex !important;
align-items: center;
height: 6rem;
background-color: green !important;
}
```
2. В компоненте, где используется SubMenu, импортируйте созданный файл с помощью метода import вместе с компонентом SubMenu:
```javascript
import React from 'react';
import { Menu } from 'antd';
import styles from './submenuStyles.module.css';
const SubMenuComponent = () => {
return (
<Menu className={styles.menu}>
<Menu.SubMenu title="Submenu">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.SubMenu>
</Menu>
);
}
export default SubMenuComponent;
```
Теперь стили из файла submenuStyles.module.css будут применяться к классу .ant-menu-submenu-title внутри компонента SubMenu.