Блог

Главная - Вопросы по программированию - свойство CSS ‘disabled’ не работает с переопределением семантического пользовательского интерфейса с помощью Styled-Components

свойство CSS ‘disabled’ не работает с переопределением семантического пользовательского интерфейса с помощью Styled-Components

#css #reactjs #styled-components

#css #reactjs #styled-components

Вопрос:

Всем привет и спасибо за вашу помощь! В настоящее время я пытаюсь отредактировать отключенное свойство, доступное из библиотеки Semantic UI. Компонент есть Menu компонент. Это отключенное свойство относится к Menu дочерним элементам, таким как Menu.Item .

Я также использую библиотеку Styled-Components для написания CSS. Я беру Menu.Item и добавляю к нему стили. Когда я нацеливаюсь на отключенное свойство, оно не обновляется. Я хочу, чтобы он был светло-серым фоном, а затем, когда он активен, отображался с предыдущим стилем, который применяется динамически.

Реагирующий компонент

 import React from "react";
import { CustomMenuItem } from "./StyledElements/MenuItemElements";

const StyledMenuItem = (props) => {

  return <CustomMenuItem {...props} />;
};

export default StyledMenuItem;
}

export default StyledDropdownItem

Стильное оформление компонентов

 import styled from "styled-components";
import { Menu } from "semantic-ui-react";

export const CustomMenuItem = styled(Menu.Item)`
  color: ${({ theme }) => theme.menuItemColor};

  /* Running 4 amp; signs to override bg color and the hover effect from semantic */
  amp;amp;amp;amp; {
    background-color: ${({ theme }) => theme.menuItemBGColor};
    border: 0.25px solid ${({ theme }) => theme.menuItemBorderLeftRightColor};
    border-top: 0;
    border-bottom: 0;

    amp;[aria-disabled="true"] {
      color: ${({ theme }) => theme.menuItemNotActiveColor} !important;
      background: ${({ theme }) => theme.menuItemNotActiveBGColor} !important;
    }

    amp;:disabled {
      color: ${({ theme }) => theme.menuItemNotActiveColor} !important;
      background: ${({ theme }) => theme.menuItemNotActiveBGColor} !important;
    }

    amp;:hover {
      background-color: ${({ theme }) => theme.menuItemBGHover};
    }
  }
`;

Фактически используемый компонент

 <StyledMenuItem className='scheduleEditorButton' size='tiny' disabled={!shouldUndo} title='Undo'>
     <StyledIcon name='undo' /> // Irrelevant
     <StyledHeaderText as="p" content="Undo"/> // Irrelevant
</StyledMenuItem>

Я не уверен, правильно ли я это делаю или нет. Я искал много мест и до сих пор не смог разобраться. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Комментарии:

1. Вы должны попробовать amp;[aria-disabled="true"] вместо amp;:disabled { того, чтобы, как они, использовать атрибуты aria.

2. Спасибо, что откликнулись. Я пошел дальше и попробовал это сделать, но, к сожалению, это не сработало.

3. Это странно, потому что и amp;[aria-disabled="true"] то, и amp;.disabled другое работало на меня. Не могли бы вы опубликовать весь выпадающий компонент целиком?

4. @ZsoltMeszaros Я только что отредактировал исходное сообщение с упомянутыми вами изменениями.

5. @ZsoltMeszaros Прошу прощения, я связывал неправильные компоненты, но я протестировал оба, и это все равно не сработало. Обновленный пост содержит актуальную информацию.

Метки: