React主题包AtlaskitTheme使用

Creating themes

官方的demo是ts版本，下列react ts 版本为例。

• $ yarn create react-app my-app --typescript
• 安装主题依赖yarn add @atlaskit/theme

• 创建CreateTheme.tsx文件

  //atlaskit/theme
  //1.theme.provider
  //2.theme.consumer
  import React from 'react';
  import color from 'color';
  import { createTheme } from '@atlaskit/theme';
  console.log(color);
  type ThemeProps = any;
  interface ThemeTokens {
      backgroundColor?: string;
      textColor?: string;
  }
  
  const DisplayThemeColors = () => (
      <Theme.Consumer>
          {(tokens: Record<string, keyof ThemeTokens>) =>
              Object.keys(tokens).map(k => (
              <div
              key={k}
              className={JSON.stringify(tokens)}
              style={{
              backgroundColor: `${tokens[k]}`,
              color: `${color(tokens[k]).negate()}`,
              display: 'inline-block',
              marginBottom: 10,
              marginRight: 10,
              padding: 10,
          }}
              >
              {k}
              </div>
              ))
          }
      </Theme.Consumer>
  );
  
  const Theme = createTheme<ThemeTokens, ThemeProps>(() => ({
      backgroundColor: '#333',
      textColor: '#eee',
  }));
  export default () => (
      <React.Fragment>
          <DisplayThemeColors />
          <Theme.Provider
              value={t => ({ ...t({}), backgroundColor: '#cde4cb' })}
          >
              <DisplayThemeColors />
          </Theme.Provider>
      </React.Fragment>
  );

  注意：在react-app-evn.d.ts 文件添加declare module 'color';,否则ts 编译会报错。

• 运行结果
  

CreateCompontTheme

• 创建CreateCompontTheme文件

  // @flow
  import React, { Component } from 'react';
  import { createTheme, ThemeProp } from '@atlaskit/theme';
  
  interface LocalThemeProps {
      hover: boolean;
  }
  
  interface ThemeTokens {
      backgroundColor: string;
      textColor: string;
  }
  
  const defaultButtonTheme = (props: LocalThemeProps) => ({
      backgroundColor: props.hover ? '#ddd' : '#eee',
      textColor: '#333',
  });
  
  const contextButtonTheme: ThemeProp<ThemeTokens, LocalThemeProps> = (
      theme,
      props,
  ) => {
      return {
          ...theme(props),
          backgroundColor: props.hover ? 'rebeccapurple' : 'palevioletred',
          textColor: props.hover ? '#fff' : 'papayawhip',
      };
  };
  
  const propButtonTheme: ThemeProp<ThemeTokens, LocalThemeProps> = (
      theme,
      props,
  ) => {
      return {
          ...theme(props),
          backgroundColor: props.hover ? 'palevioletred' : 'rebeccapurple',
      };
  };
  
  const Theme = createTheme(defaultButtonTheme);
  
  interface Props {
      children?: React.ReactNode;
      theme?: ThemeProp<ThemeTokens, LocalThemeProps>;
  }
  
  interface State {
      hover: boolean;
  }
  
  class Button extends Component<Props, State> {
      state = {
          hover: false,
      };
  
      onMouseEnter = () => this.setState({ hover: true });
  
      onMouseLeave = () => this.setState({ hover: false });
  
      render() {
          return (
              <Theme.Provider value={this.props.theme}>
                  <Theme.Consumer hover={this.state.hover}>
                      {tokens => {
                          const { backgroundColor, textColor: color } = tokens;
                          return (
                              <button
                                  onMouseEnter={this.onMouseEnter}
                                  onMouseLeave={this.onMouseLeave}
                                  style={{
                                      backgroundColor,
                                      border: 0,
                                      borderRadius: 3,
                                      color,
                                      cursor: 'pointer',
                                      marginBottom: 10,
                                      marginRight: 10,
                                      padding: 10,
                                  }}
                                  type="button"
                              >
                                  {this.props.children}
                              </button>
                          );
                      }}
                  </Theme.Consumer>
              </Theme.Provider>
          );
      }
  }
  
  export default () => (
      <>
          <Button>Default</Button>
          <Theme.Provider value={contextButtonTheme}>
              <Button>Context</Button>
              <Button theme={propButtonTheme}>Custom</Button>
          </Theme.Provider>
      </>
  );
  

• 在App.js使用组件<CreateCompontTheme />
• 效果
  

AtlaskitThemeProvider

非ts下必须安装styled-components并且启用flow,否则报错

• 创建ThemeProvider文件

  // @flow
  import React, { Component } from 'react';
  import Button from '@atlaskit/button';
  import { AtlaskitThemeProvider } from '@atlaskit/theme';
  
  interface Props {}
  type State = { themeMode: 'light' | 'dark' };
  
  export default class extends Component<Props, State> {
      state: State = { themeMode: 'light' };
  
      switchTheme = () => {
          const { themeMode } = this.state;
          this.setState({
              themeMode: themeMode === 'light' ? 'dark' : 'light',
          });
      };
  
      render() {
          const { themeMode } = this.state;
          return (
              <AtlaskitThemeProvider mode={themeMode}>
                  <div style={{ padding: 8 }}>
                      <Button onClick={this.switchTheme}>Switch theme ({themeMode})</Button>
                      <p>This is the old theming API</p>
                  </div>
              </AtlaskitThemeProvider>
          );
      }
  }

• 运行结果
  
  略懂react，可以自己更改state查看效果。

ResetTheme

• 写ResetTheme.js文件

//@flow
import { Reset, ResetTheme } from '@atlaskit/theme';

<ResetTheme.Provider
    value={t => (

            { ...t({}), backgroundColor: '#fffbe5', textColor: '#000' })}
>
    <Reset style={{ padding: 10 }}>

        You can also theme a reset.</Reset>

</ResetTheme.Provider>

• 效果
  

特别说明

• 要么全部用ts运行，要么用flow,当时，第一个例子keyof关键字flow不支持，用flow编译时候必须在文件头加入//@flow,额外需要安装"styled-components": "3.4.9"

参考资料

Theme

源代码

Ts demo
Flow demo