我有一个白标应用程序和两个终端客户端,它们想要略有不同的主题。我理想情况下不想在顶层传递主题,然后通过下面的所有不同组件。1.有没有更好的办法?1.我会动态选择主题吗?1.我可以使主题全局可用吗?就像Tailwind CSS对它的配置文件所做的那样,如果可以的话,我如何动态地改变它?
<MyApp theme={theme}/>
f8rj6qna1#
以下是您可以用来实现此目的的策略:
import React, { createContext, useState } from 'react'; export const ThemeContext = createContext(); const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ); }; export default ThemeProvider;
import React, { useContext } from 'react'; import { ThemeContext } from './ThemeProvider'; import styled from 'styled-components'; const StyledButton = styled.button` background-color: ${props => props.theme.color}; `; const Button = () => { const { theme, setTheme } = useContext(ThemeContext); return ( <> <StyledButton theme={theme} onClick={() => setTheme('light')}> Light </StyledButton> <StyledButton theme={theme} onClick={() => setTheme('dark')}> Dark </StyledButton> </> ); }; export default Button;
import React from 'react'; import { ThemeProvider } from './ThemeProvider'; import MyApp from './MyApp'; const App = () => { return ( <ThemeProvider> <MyApp /> </ThemeProvider> ); }; export default App;
在本图中,ThemeProvider组件使用上下文API使setTheme函数和当前主题状态可供整个应用程序使用。通过使用所需主题调用setTheme函数,Button组件可以使用useContext挂接访问主题状态并更改主题,从而更改主题。
isr3a4wc2#
您可以为样式(如style.js)创建单独的文件,然后将样式从该文件导入到任何其他文件
2条答案
按热度按时间f8rj6qna1#
以下是您可以用来实现此目的的策略:
在本图中,ThemeProvider组件使用上下文API使setTheme函数和当前主题状态可供整个应用程序使用。通过使用所需主题调用setTheme函数,Button组件可以使用useContext挂接访问主题状态并更改主题,从而更改主题。
isr3a4wc2#
您可以为样式(如style.js)创建单独的文件,然后将样式从该文件导入到任何其他文件