React主题包AtlaskitTheme使用 - HelloWorld开发者社区

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>