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

Question

我想了解是否可以使用 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

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

Answer 1

您可以尝试以下操作。您现在可以将 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>
    </>

   );
};

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

Changing the theme color value from user input on button click using ThemeProvider

reactjs

styled-components

react-props

use-state

themeprovider