styled-componentsを使用してcssクラスを提供します

Question

CSSクラスの従来のクラス名を期待するスタイルを変更するためにcalendarClassNameを必要とするサードパーティのlibがあります。これを実現するためにスタイル付きコンポーネントを使用できますか？

css関数を試しましたが、機能しません。結果は、CSSクラスエンティティではなくスタイルの配列になります。

このようなことをしたいだけです：

const myStyle = css`color: black`;

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

運が悪かったのにattrsを試しましたが、classNameが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;
}
`;