使用樣式組件爲目標指定特定的CSS類

Question

如何使用樣式組件將樣式設置爲react-datepicker？ datepicker庫看起來像它使用某種類型的BEM風格（下面的屏幕截圖），我通常會使用他們提供的類名和樣式使用Sass。但是，我將如何將這些類名稱與樣式化組件相關聯？這甚至有可能嗎？

Answer 1

由於styled-components只是CSS™你會做它像任何其他樣式表，通過使用react-datepicker提供的類名。

唯一的區別是，你必須包裝在一個包裝樣式的組件的日期選擇器，其適用於所有這些類：

const Wrapper = styled.div` 
    &.react-datepicker { 
    color: blue; 
    } 
` 

<Wrapper> 
    <Datepicker /> 
</Wrapper>