使用ThemeProvider从按钮单击时的用户输入更改主题颜色值

问题描述

我想了解是否可以通过从用户处获取输入并管理状态来使用ThemeProvider来更改主题值。

我有一个包装在ThemeProvider中的应用程序，用于管理主题。

import styled from 'styled-components'
import { ThemeProvider } from 'styled-components'
import appTheme from './theme'


function App(props,theme) {
  // const themeContext = useContext(ThemeContext)

  const [themePrimary,setThemePrimary] = useState(appTheme.primary)

  function changePrimaryColor(props) {
    setThemePrimary(props)
    appTheme.primary = props
  }

...

return (
    <ThemeProvider theme={theme}>
      <Router>
        <Switch>
          <Route
            path="/"
            exact
            render={({ match }) => {
              return (
                <Frame id="app-frame">
                  <AppHeader match={match} />
                  <Main>
                    <p>Home</p>
                  </Main>
                </Frame>
              )
            }}
          />
...

在设置视图中，用户必须能够输入颜色值。

const ColorTest = styled.input`
  background: ${props => theme.primary};
  border: none;
  margin-left: 50px;
`

...
  const colorInputValue = useRef(null)


  const handleColorSubmit = (e) => {
    e.preventDefault()
  }

  const handleClick = () => {
    const color = colorInputValue.current.value
    props.changePrimaryColor(color)
    console.log(color)
  }

...

<PageSection>
    <Form onSubmit={handleColorSubmit}>
      <h2>Change primary color</h2>
      <ColorInput placeholder="hex or string" ref={colorInputValue} />
      <SubmitFormBtn type="submit" onClick={handleClick}>Change</SubmitFormBtn>
      <ColorTest disabled></ColorTest>
    </Form>
</PageSection>

（这里的ColorTest组件用于测试。实际上，它告诉我所有数据都正确传递并且颜色发生了变化。）

这是我的“主题”

const theme = {
  primary: '#0068B6',secondary: '',text_color: '#555',text_light: '#fff',border: '#e3e3e3',drop_shadow: '3px 3px 3px rgba(0,0.3)',background: '#fff',background_secondary: '#f5f5f5',}

export default theme

该新值必须更改原色的颜色值并触发应用程序组件重新渲染。在不使用本地存储或数据库的情况下，如何做到这一点呢？

解决方法

您可以尝试以下操作。现在，您可以将updateTheme函数传递给其他子组件。

我可能会从组件中取出defaultTheme并将其作为道具（而不是导入的文件）传递。这意味着您可以将App组件重复使用几个不同的默认主题。

import React,{ useState } from 'react';
import styled from 'styled-components';
import { ThemeProvider } from 'styled-components';
import { BrowserRouter as Router,Route,Switch } from 'react-router-dom'; // Not sure if this is your import

export default function App({
  defaultTheme={
    primary: '#0068B6',secondary: '',text_color: '#555',text_light: '#fff',border: '#e3e3e3',drop_shadow: '3px 3px 3px rgba(0,0.3)',background: '#fff',background_secondary: '#f5f5f5',},}) {
  const [theme,setTheme] = useState(defaultTheme);

  // update here is an object,e.g.,{ primary: '#333' }
  const updateTheme = (update) => {
    return setTheme({ ...theme,...update });
  };

  const paint = () => {
    // If you're using something to generate the theme,you can put it here instead. For example () => createMuiTheme(theme).
    return React.useMemo(() => ({ ...theme }),[theme]);
  };

  return (
    <ThemeProvider theme={paint()}>
      <Router>
       <Switch>
         <Route
           exact
           path='/'
           render={() => <View theme={theme} updateTheme={updateTheme} />}
         />
       </Switch>
      </Router>
    </ThemeProvider>
  );
};

// Or use your hooks to get the theme
export default function View({ updateTheme,theme }) {
  return (
    <>
      <div
        style={{
          backgroundColor: theme.primary,height: 100,width: 100,}}
      />
      <button
        onClick={() => updateTheme({ primary: '#333' })}
      >
        Change primary
      </button>
    </>

   );
};