接下來要選擇建立主題的方式，目前我們有幾個選擇：

1. CSS override (同 Ant-Design )
2. React-jss
3. Styled-jss

CSS override 的部分我不太考慮，感覺就是會越來越多，雖然直接改應該買快的但總體上很發散，所以想回歸到使用 jss 的做法(同Material-UI)，所以在 React-jss 和 Styled-jss 之前做選擇。

React-jss

Basic Usage

下列程式碼結果如下圖：

以基本的 Button 為例：

import React from "react";
import propTypes from "prop-types";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles((theme) => ({
  button: {
    paddingTop: theme.getSpacing(1),
    paddingLeft: theme.getSpacing(2),
    paddingRight: theme.getSpacing(2),
    paddingBottom: theme.getSpacing(1),
    marginTop: theme.getSpacing(2),
    backgroundColor: theme.colors.primary,
  },
}));

const Button = (props) => {
  const classes = useStyles();
  const { text, onClick } = props;
  return (
    <input
      className={classes.button}
      type='button'
      value={text}
      onClick={onClick}
    />
  );
};

Button.propTypes = {
  text: propTypes.string,
  onClick: propTypes.func,
};

Button.defaultProps = {
  text: "",
  onClick: () => false,
};

export default Button;

Theming

主題透過 Provider 傳遞：

import React from 'react';
import './App.css';
import theme from './lib/theme';
import ReactJSSButton from './lib/Button/ReactJSSButton';
import { ThemeProvider } from 'react-jss';

function App() {
  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <ReactJSSButton text='React JSS Button'/>
      </ThemeProvider>
    </div>
  );
}

export default App;

Styled-jss

下列程式碼結果如下圖：

總之就是和上面一模一樣～

Styled JSS 相對寫法就簡潔許多，而且不需要再多一個const classes = useStyles()來取得樣式。只是使用情境與寫法比較限制。

Basic Usage

import styled from 'styled-jss'
import propTypes from "prop-types";

const Button = styled('input')(({theme}) => ({
    paddingTop: theme.getSpacing(1),
    paddingLeft: theme.getSpacing(2),
    paddingRight: theme.getSpacing(2),
    paddingBottom: theme.getSpacing(1),
    marginTop: theme.getSpacing(2),
    backgroundColor: theme.colors.primary,
}));

Button.propTypes = {
  value: propTypes.string,
  onClick: propTypes.func,
};

Button.defaultProps = {
  value: "",
  onClick: () => false,
};

export default Button;

Theming

主題的設置基本上大同小異。

import React from 'react';
import './App.css';
import theme from './lib/theme';
import StyledJSSButton from './lib/Button/StyledJSSButton';
import { ThemeProvider } from 'styled-jss';

function App() {
  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <StyledJSSButton type='button' value='Styled JSS Button'/>
      </ThemeProvider>
    </div>
  );
}

export default App;

Styled-jss 如果想要換成 classes 的寫法也是可以的，只要使用 injectStyled 即可。

小結

最後決定使用 Styled-jss，原因是目前著重在樣式的修改，使用他也可以讓程式碼比較簡潔，不用多一層classes去傳遞className。再來如果有需要也可以改成classes的寫法，算滿有彈性的。接下來會開始用 Style-jss 實作UI的部分。有興趣也可以參考 styled-components的做法。