Skip to main content

One post tagged with "TypeScript"

View All Tags

· 2 min read
Chengzihan

1

考虑的问题

  • 代码结构
  • 样式解决方案
  • 组件需求分析和编码
  • 组件测试用例分析和编码
  • 代码打包输出和发布
  • CI/CD,文档生成等

项目创建

创建 React 项目:

npx create-react-app triangle-design typescript

添加 ESLint

yarn add eslint -D
yarn eslint --init

样式系统

inline css

举例:

<div style={{ color: 'red' }}>Hello</div>

css in js

styled-components

styled-components 是一个用于 React 的 CSS-in-JS 库,它可以让你在组件中使用样式,而不用担心样式污染。

import styled from 'styled-components'

const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`

ReactDOM.render(
<Title>Hello World!</Title>,
document.getElementById('root')
)

emotion

Emotion 是一个用于 CSS-in-JS 的库,它可以让你在组件中使用样式,而不用担心样式污染。

import styled from '@emotion/styled'

const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`

ReactDOM.render(
<Title>Hello World!</Title>,
document.getElementById('root')
)

Sass/Less

Sass

Sass 是一种 CSS 预处理器,它可以让你使用变量、嵌套规则、混合(mixin)等高级功能来简化 CSS 的编写。

// style.scss
$color: red;

body {
color: $color;
}
// index.js

import './style.scss'

Less

Less 是一种 CSS 预处理器,它可以让你使用变量、嵌套规则、混合(mixin)等高级功能来简化 CSS 的编写。

// style.less

@color: red;

body {
color: @color;
}
// index.js

import './style.less'

tailwindcss

Tailwind 是一个用于 CSS 的工具类库。

// index.js

import './style.css'
// style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

同时也可以直接在组件中使用 tailwindcss 的工具类。

<div className="bg-red-500">Hello</div>