Используйте styled-компоненты для предоставления класса CSS

Question

У меня есть сторонняя библиотека, которой требуется calendarClassName для изменения ее стиля, который ожидает традиционное имя класса CSS-класса. Могу ли я использовать стилизованные компоненты для этого?

Я попробовал css функцию, но она не будет работать, результатом будет массив стилей, а не сущность класса CSS.

Просто хочу сделать что-то вроде этого:

const myStyle = css`color: black`;

<DatePicker calendarClassName={myStyle}> // won't work

Попытка attrs без удачи, имя_класса не передано DatePicker.

const calendarClassName = "calendar";
export const MyDatePicker = styled(DatePicker).attrs({
  calendarClassName,
})`
  .${calendarClassName} {
    border-radius: 0px;
    box-shadow: 2px 0px 2.5px #D6D6D6;
    border: 1px solid ${color.pacific};
  }
`;

Я знаю, что могу использовать CSS напрямую, но я просто хочу знать, как использовать styled-components для выполнения этой работы.

Спасибо:)

Answer 1

Вы можете внедрить CSS-классы, используя следующий фрагмент кода. В приведенном ниже фрагменте в классе 1 свойство color будет переопределено. Это будет работать, если class-1 уже применяется к применяемому классу, иначе вам придется передать className = 'class-1' в DatePicker.

import styled, { css } from 'styled-components';
export const StyledDatePicker = styled(DatePicker)`
.class-1 {
 color: black;
}
`;

Answer 2

попробуйте это:

const Wrapper = styled.div`
  & .calendarClassName{
    // your style goes here
  }
`;

<Wrapper>
   <DatePicker />
</Wrapper>

или

const DtPicker = styled(DatePicker)`
  & .calendarClassName{
    // your style goes here
  }
`;

<DtPicker />

Необходимо использовать 'пробел' между '&' и '. CalendarClassName'

Answer 3

Я думаю, что этот подход может решить вашу проблему, если calendarClassName применяется для вложенного элемента.

const StyledDatePicker = styled(DatePicker)`
  .calendarClassName {
    border-radius: 0px;
    box-shadow: 2px 0px 2.5px #D6D6D6;
    border: 1px solid ${color.pacific};
  }
`;

<StyledDatePicker calendarClassName="calendarClassName">