Блог

Главная - Вопросы по программированию - Непоследовательный стиль сборника рассказов

Непоследовательный стиль сборника рассказов

#reactjs #next.js #styled-components #storybook

#reactjs #next.js #styled-компоненты #сборник рассказов

Вопрос:

Я настраиваю свои компоненты в сборнике рассказов, и у меня возникает несоответствие между тем, что появляется в Интернете, и тем, что появляется в инструменте. Я потратил много времени на настройку и изменение стилей, но ничего не работает. Какие-либо мысли могут быть причиной этого?

Стили

 const WidgetWrapper = styled.div<{
  warning?: boolean;
  complete?: boolean;
}>`
  cursor: defau<
  border: 1px solid ${colors.grey[800]};
  ${({ warning }) => warning amp;amp; `border: 1px solid ${colors.red[200]}`};
  ${({ complete }) => complete amp;amp; `border: 1px solid ${colors.grey[800]}`};
  border-radius: 3px;
  box-shadow: ${theme.layout.boxShadow.sharp};
  overflow: hidden;
  width: 35px;
  height: 35px;
`;

const InnerContent = styled.div<{ warning?: boolean; complete?: boolean }>`
  display: grid;
  place-items: center;
  height: 100%;
  border: 4px solid ${colors.offWhite};
  ${({ warning }) => warning amp;amp; `border: 4px solid ${colors.red[400]}`};
  ${({ complete }) => complete amp;amp; `border: 4px solid ${colors.lightShades}`};
  background-color: ${colors.offWhite};
`;

На моей веб-странице:

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

внутри сборника рассказов:

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

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

1. Можете ли вы поделиться с нами копией стилей, применяемых к обоим компонентам в сборнике рассказов, а также к другому контексту? Вы можете скопировать его с вкладки «Элементы» в инструментах разработчика Chrome. Моя интуиция подсказывает, что есть несколько дополнительных глобальных стилей, благодаря которым стили работают в вашем приложении, но не в сборнике рассказов.

2. Я вижу подобное поведение при использовании границ. Вы подняли проблему с Github?

3. @Calibre у меня нет, нет.