iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
1

接下來我們要開始建立基本的組件,其中包含:

  • 按鈕 Button
  • 圖標 Icon
  • 文字 Typography

在開始設計組件之前,建議先定義好參數再開始設計會比較好,如此一來才可以避免 props 開始發散。

按鈕

基本參數如下:

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

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

樣式的部分,使用 styled-jss:

const StyledInput = styled('input')((theme) => ({
  padding: `${theme.getSpacing(5)}px ${theme.getSpacing(1)}px`,
  backgroundColor: theme.colors.primary,
  borderRadius: theme.radius
}));

const Button = props => {
  const { text, onClick } = props;
  return (
    <StyledInput type='button' style={styles.button} value={text} onClick={onClick} />
  )
}

建立了第一個依照我們樣式產生的組件。

小結

Mac 的容量竟然爆了連 yarn 都不行,這個故事告訴我們,工欲善其事,必先利其器...。


上一篇
Day 07 從 Create React App 建立 Package 專案
下一篇
Day 09 選擇使用 React-jss 或是 Styled-jss
系列文
30 天來點 Design System30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言