Question

我有一堆内容相似的React应用程序要样式化，我正在尝试根据Styled-Components / Styled-Theming来设计一个系统，以仅通过更改{{1 }}主题道具。

我一直在尝试不同的选择，这似乎是最有效的方法：

外部<ThemeProvider />文件，其中所有样式都包装在全局对象中

themes.js

代表我的应用的CRA，
- 一个import theme from "styled-theming"; const backG = theme.variants("observatory", "backG", { positiveDark: { _OBS1: 'hsl(73, 65%, 50%)', _OBS2: 'hsl(210, 100%, 60%)', }, negativeDark: { _OBS1: 'hsl(8, 70%, 63%)', _OBS2: 'hsl(0, 100%, 90%)', }, actionDark: { _OBS1: 'hsl(53, 82%, 62%)', _OBS2: 'hsl(48, 100%, 50%)', }, }); const cursor = theme.variants("observatory", "cursor", { normal: { _OBS1: 'initial', _OBS2: 'initial', }, pointer: { _OBS1: 'pointer', _OBS2: 'pointer', }, }); const fontS = theme.variants("observatory", "fontS", { h1: { _OBS1: "2.4rem", _OBS2: "2.25rem", }, h2: { _OBS1: "2.2rem", _OBS2: "2rem", }, h3: { _OBS1: "2rem", _OBS2: "1.75rem", }, }); const flexL = theme.variants("observatory", "flexL", { layout1: { _OBS1: "; display: flex; justify-content: center;", _OBS2: "; display: flex; justify-content: center;", }, layout2: { _OBS1: "; display: flex; justify-content: space-around; align-items: flex-start;", _OBS2: "; display: flex; flex-direction: column; align-items: flex-start;", }, layout3: { _OBS1: "; display: flex; flex-direction: column; align-items: flex-start;", _OBS2: "; display: flex; justify-content: space-around; align-items: flex-start;", } }); const themes = { backG: backG, cursor: cursor, flexL: flexL, fontS: fontS, } export {themes};文件，其中包含2个index.js，第一个文件引用外部文件，第二个文件处理该外部文件中的主题

<ThemeProvider />

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // styles import {themes} from "./themes"; import {ThemeProvider} from "styled-components"; ReactDOM.render( <ThemeProvider theme={themes}> <ThemeProvider theme={{ observatory: "_OBS2" }}> <App /> </ThemeProvider> </ThemeProvider>, document.getElementById('root') );文件和其他子组件

App.js

import React from 'react';

// styles
import styled, { injectGlobal } from "styled-components";

// components
import ThreeButtons from "./ThreeButtons";

injectGlobal`
  @import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');

  html {
    font: 400 10px Roboto, sans-serif;
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body {
    font: 500 1.8rem Quicksand;
  }
`

const Wrapper1 = styled.div`
  display: ${props => props.theme.flexL};
  align-items: ${props => props.theme.flexL};
`

const App = () => (
  <Wrapper1 flexL="layout1">
    <ThreeButtons alignSelf1="center" flexL="layout2" />
    <ThreeButtons alignSelf2="flex-end" flexL="layout3" />
  </Wrapper1>
);

export default App;

import React from "react";

// styles
import styled from "styled-components";

// components
import Button from "./Button";


const Wrapper1 = styled.div`
  flex: 1;
  display: ${props => props.theme.flexL};
  flex-direction: ${props => props.theme.flexL};
  align-items: ${props => props.theme.flexL};
`

const ThreeButtons = (props) => (
  <React.Fragment>
    <Wrapper1
      flexL={props.flexL}
    >
      <Button
        backG="positiveDark"
        cursor="pointer"
        fontS="h1"
        label="lg-pos-button-pointer"
      />
      <Button
        alignSelf={props.alignSelf1}
        backG="negativeDark"
        cursor="pointer"
        fontS="h2"
        label="md-neg-button-pointer"
      />
      <Button
        alignSelf={props.alignSelf2}
        backG="actionDark"
        cursor="normal"
        fontS="h3"
        label="sm-act-button-nopointer"
      />
    </Wrapper1>
  </React.Fragment>
)

export default ThreeButtons;

就像我之前说过的那样，它看起来可行，但是仍然有两件事我不太满意，因为我不明白：

在import React from "react"; // styles import styled from "styled-components"; const StyledButton = styled.button` align-self: ${props => props.alignSelf}; background: ${props => props.theme.backG}; font-size: ${props => props.theme.fontS}; cursor: ${props => props.theme.cursor}; padding: 1.2rem 1.8rem; border: none; border-radius: .3rem; margin: 1rem; filter: saturate(50%); transition: filter ease-in-out .15s; &:hover { filter: saturate(100%); } ` const Button = (props) => ( <StyledButton backG={props.backG} cursor={props.cursor} alignSelf={props.alignSelf} fontS={props.fontS} > {props.label} </StyledButton> ) export default Button;外部文件中，我一直在尝试创建某种Flexbox mixins：要使其工作，必须在字符串值中添加一个初始分号，否则第一个属性是不考虑，其值不适用。有人可以解释一下为什么吗？
在themes.js文件中，我必须将index.js嵌套在另一个文件中以使其正常工作：同样，有人可以向我解释样式化组件和样式化主题如何一起工作？
通常来说，您是否有任何提示或建议来使我的解决方案成为更好的解决方案或解决我的最初问题，那就是在全球范围内设计一堆内容相似的React应用程序？

如果需要，可以在GitHub上找到整个代码：https://github.com/paillenapple/styles_sandbox

感谢您的帮助。

Silvère

使用样式化组件/样式化主题

0 个答案: