登录
转载

梦回 windows95 的 React 组件库

发布于 2020-11-20 阅读 37
  • 前端
转载

能够让你梦回 windows95 的 React 组件库。、
链接地址: https://github.com/arturbien/React95

  • 在项目目录中安装组件库和样式化组件。
  • ThemeProvider组件自行选择主题,并使用ThemeProvider包装您的应用程序,就可以开始使用。
import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import { styleReset, List, ListItem, Divider } from 'react95';
// pick a theme of your choice
import original from "react95/dist/themes/original";
// original Windows95 font (optionally)
import ms_sans_serif from "react95/dist/fonts/ms_sans_serif.woff2";
import ms_sans_serif_bold from "react95/dist/fonts/ms_sans_serif_bold.woff2";

const GlobalStyles = createGlobalStyle`
  @font-face {
    font-family: 'ms_sans_serif';
    src: url('${ms_sans_serif}') format('woff2');
    font-weight: 400;
    font-style: normal
  }
  @font-face {
    font-family: 'ms_sans_serif';
    src: url('${ms_sans_serif_bold}') format('woff2');
    font-weight: bold;
    font-style: normal
  }
  body {
    font-family: 'ms_sans_serif';
  }
  ${styleReset}
`;

const App = () => (
  <div>
    <GlobalStyles />
    <ThemeProvider theme={original}>
      <List>
        <ListItem>🎤 Sing</ListItem>
        <ListItem>💃🏻 Dance</ListItem>
        <Divider />
        <ListItem disabled>😴 Sleep</ListItem>
      </List>
    </ThemeProvider>
  </div>
);

export default App;

clipboard45.png

评论区

sandwich
0粉丝

励志做一条安静的咸鱼,从此走上人生巅峰。

0

0

0