Chủ đề động trong các thành phần được tạo kiểu

Question

Tôi đang sử dụng các thành phần theo kiểu trong ứng dụng React của mình và muốn sử dụng một chủ đề động. Một số khu vực sẽ sử dụng chủ đề tối của tôi, một số sẽ sử dụng ánh sáng. Bởi vì các thành phần được tạo kiểu phải được khai báo bên ngoài thành phần chúng được sử dụng, làm thế nào để chúng ta đi qua một chủ đề động?

Answer 1

Đó chính xác là thành phần ThemeProvider dành cho!

thành phần theo kiểu của bạn có quyền truy cập vào một theme prop đặc biệt khi họ suy chức năng:

const Button = styled.button` 
    background: ${props => props.theme.primary}; 
` 

phần <Button /> này bây giờ sẽ phản ứng tự động đến một chủ đề xác định bởi một ThemeProvider. Làm thế nào để bạn xác định một chủ đề? Vượt qua bất kỳ đối tượng để các theme prop của ThemeProvider:

const theme = { 
    primary: 'palevioletred', 
}; 

<ThemeProvider theme={theme}> 
    <Button>I'm now palevioletred!</Button> 
</ThemeProvider> 

Chúng tôi cung cấp các chủ đề cho các thành phần theo kiểu của bạn thông qua context, có nghĩa là dù có bao nhiêu thành phần hoặc các nút DOM là ở giữa các thành phần và các ThemeProvider nó sẽ vẫn làm việc giống hệt nhau:

const theme = { 
    primary: 'palevioletred', 
}; 

<ThemeProvider theme={theme}> 
    <div> 
    <SidebarContainer> 
     <Sidebar> 
     <Button>I'm still palevioletred!</Button> 
     </Sidebar> 
    </SidebarContainer> 
    </div> 
</ThemeProvider> 

Điều này có nghĩa bạn có thể bọc toàn bộ ứng dụng của bạn trong một đơn ThemeProvider, và tất cả các thành phần theo kiểu của bạn sẽ nhận được chủ đề đó. Bạn có thể hoán đổi một thuộc tính đó một cách linh hoạt để thay đổi giữa ánh sáng và chủ đề tối!

Bạn có thể có ít hoặc nhiều ThemeProvider giây trong ứng dụng của mình theo ý muốn. Hầu hết các ứng dụng sẽ chỉ cần một để bọc toàn bộ ứng dụng, nhưng để có một phần của ứng dụng của bạn có ánh sáng theo chủ đề và một số phần tối khác theo chủ đề, bạn sẽ chỉ quấn chúng trong hai ThemeProvider s có chủ đề khác nhau:

const darkTheme = { 
    primary: 'black', 
}; 

const lightTheme = { 
    primary: 'white', 
}; 

<div> 
    <ThemeProvider theme={lightTheme}> 
    <Main /> 
    </ThemeProvider> 

    <ThemeProvider theme={darkTheme}> 
    <Sidebar /> 
    </ThemeProvider> 
</div> 

Bất kỳ thành phần được tạo kiểu nào ở bất kỳ đâu bên trong Main bây giờ sẽ có chủ đề nhẹ và mọi thành phần được tạo kiểu ở bất kỳ đâu bên trong Sidebar sẽ có chủ đề tối. Chúng thích nghi tùy thuộc vào khu vực ứng dụng mà chúng được hiển thị, và bạn không phải làm bất cứ điều gì để làm cho nó xảy ra!

Tôi khuyến khích bạn xem docs about theming của chúng tôi, vì các thành phần theo kiểu được xây dựng rất nhiều với ý nghĩ đó.

Một trong những điểm đau lớn nhất của phong cách trong JS trước khi các thành phần theo kiểu tồn tại là các thư viện trước đó đã đóng gói và sắp xếp kiểu dáng rất tốt, nhưng không ai trong số chúng có hỗ trợ thích hợp. Nếu bạn muốn tìm hiểu thêm về các điểm đau khác mà chúng tôi đã có với các thư viện hiện tại, tôi khuyến khích bạn xem my talk at ReactNL nơi tôi đã phát hành các thành phần theo kiểu. (lưu ý: phong cách đầu tiên của các thành phần theo kiểu 'ở khoảng ~ 25 phút, đừng ngạc nhiên!)