时间戳

首页 > 解决方案 > 使用 ThemeProvider 从用户输入的按钮单击更改主题颜色值

reactjs - 使用 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, 0, 0.3)',
  background: '#fff',
  background_secondary: '#f5f5f5',
}

export default theme

该新值必须更改原色的颜色值并触发应用组件重新渲染。我如何在不使用本地存储或数据库的情况下实现这一点，而只是陈述？

标签： reactjsstyled-componentsreact-propsuse-statethemeprovider

解决方案

您可以尝试以下方法。您现在可以将该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, 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>
    </>

   );
};

推荐阅读