Theme UIを触ってみる

https://github.com/system-ui/theme-ui

Theme UIは、Stitches、Chakra UI、EvergreenとAmplidy UIが採用しているのUIシステムです

まずはtheme-uiをインストール

npm install theme-ui

次はtheme.jsというファイルを作ります
位置はApp.jsの隣です

src/theme.js

const theme = {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

export default theme;

そして、App.jsを開けます
コンポーネントの一番外に<ThemeProvider>を書きます

src/App.js

import { ThemeProvider } from '@theme-ui/core';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* ここからコンポーネントを始めます */}
    </ThemeProvider>
  );
}

export default App;

次はHTML要素を書きます
App.jsの一番上に/** @jsxImportSource theme-ui */を加えて
returnの中に要素を書きます

src/App.js

+/** @jsxImportSource theme-ui */
import { ThemeProvider } from '@theme-ui/core';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
+      <h1 sx={{
+        color: 'primary',
+        fontFamily: 'heading',
+      }}>123</h1>
    </ThemeProvider>
  );
}

export default App;