reactjs 如何使用StyledComponents动态更改主题？

14ifxucb 于 2023-01-17 发布在 React

关注(0)|答案(2)|浏览(171)

我有一个白标应用程序和两个终端客户端，它们想要略有不同的主题。我理想情况下不想在顶层传递主题，然后通过下面的所有不同组件。
1.有没有更好的办法？
1.我会动态选择主题吗？
1.我可以使主题全局可用吗？就像Tailwind CSS对它的配置文件所做的那样，如果可以的话，我如何动态地改变它？

<MyApp theme={theme}/>

reactjs

来源：https://stackoverflow.com/questions/75133293/how-to-dynamically-change-theme-using-styledcomponents

2条答案

按热度按时间

f8rj6qna1#

以下是您可以用来实现此目的的策略：

创建一个名为ThemeProvider的组件，其中包含了完整的应用程序，该组件负责维护主题状态，并通过上下文API将其提供给程序的其余部分。

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;

要在应用程序中访问主题状态和setTheme方法，请使用useContext钩子。

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;

在应用程序的顶层，包含“ThemeProvider”组件并向其发送主题 prop 。

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挂接访问主题状态并更改主题，从而更改主题。

赞(0）回复(0）举报 2023-01-17

isr3a4wc2#

您可以为样式（如style.js）创建单独的文件，然后将样式从该文件导入到任何其他文件

赞(0）回复(0）举报 2023-01-17