Part 7 React router、自定义 hook，利用CSS和webpack给app添加样式 - 3. 更多样式 - 《前端漫步》

React BootStrap
Material UI
对比
Styled components

React BootStrap

参考文档：https://react-bootstrap.github.io/getting-started/introduction
安装

npm install react-bootstrap@next bootstrap@5.1.0

在public/index.js中的head中添加css link

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
    crossorigin="anonymous"
  />
</head>

在 Bootstrap 中，应用的所有内容通常都渲染在一个容器中。通过给应用的根 div 元素添加 container class 属性来实现的:

const App = () => {
  // ...
  return (
    <div className="container">
      // ...
    </div>
  )
}

使用Table组件

import { Table } from 'react-bootstrap'
const Notes = ({ notes }) => (
  <div>
    <h2>Notes</h2>
    <Table striped>
      <tbody>
        {notes.map((note) => (
          <tr key={note.id}>
            <td>
              <Link to={`/notes/${note.id}`}>{note.content}</Link>
            </td>
            <td>{note.user}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  </div>
)

使用Form组件

const Login = (props) => {
  // ...
  return (
    <div>
      <h2>login</h2>
      <Form onSubmit={onSubmit}>
        <Form.Group>
          <Form.Label>username:</Form.Label>
          <Form.Control type="text" name="username" />
          <Form.Label>password:</Form.Label>
          <Form.Control type="password" />
          <Button variant="primary" type="submit">
            login
          </Button>
        </Form.Group>
      </Form>
    </div>
  )
}

使用Alert组件

<div className="container">
  {(message &&
    <Alert variant="success">
      {message}
    </Alert>
  )}
  // ...
</div>

使用Navbar组件

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#" as="span">
        <Link style={padding} to="/">home</Link>
      </Nav.Link>
      <Nav.Link href="#" as="span">
        <Link style={padding} to="/notes">notes</Link>
      </Nav.Link>
      <Nav.Link href="#" as="span">
        <Link style={padding} to="/users">users</Link>
      </Nav.Link>
      <Nav.Link href="#" as="span">
        {user
          ? <em style={padding}>{user} logged in</em>
          : <Link style={padding} to="/login">login</Link>
        }
    </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Material UI

官方文档：https://material-ui.com/zh/getting-started/installation/
安装

npm install @material-ui/core

在public/index.js的head中添加下列代码，引入Roboto字体

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  // ...
</head>

所有要渲染的组件都要放在Container组件中

import Container from '@material-ui/core/Container'
const App = () => {
  // ...
  return (
    <Container>
      // ...
    </Container>
  )
}

使用Table组件

const Notes = ({notes}) => (
  <div>
    <h2>Notes</h2>
    <TableContainer component={Paper}>
      <Table>
        <TableBody>
          {notes.map(note => (
            <TableRow key={note.id}>
              <TableCell>
                <Link to={`/notes/${note.id}`}>{note.content}</Link>
              </TableCell>
              <TableCell>
                {note.user}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </div>
)

这些组件要一个一个引入

import {
  Container,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableRow,
  Paper,
} from '@material-ui/core'

使用TextField和Button组件

<div>
  <h2>login</h2>
  <form onSubmit={onSubmit}>
    <div>
      <TextField label="username" />
    </div>
    <div>
      <TextField  label="password" type='password' />
    </div>
    <div>
      <Button variant="contained" color="primary" type="submit">
        login
      </Button>
    </div>
  </form>
</div>

使用Alert组件
先安装lab包

npm install @material-ui/lab

import { Alert } from '@material-ui/lab'

<div>
  {(message &&
    <Alert severity="success">
      {message}
    </Alert>
  )}
</div>

使用Appbar实现导航栏

<AppBar position="static">
  <Toolbar>
    <Button color="inherit" component={Link} to="/">
      home
    </Button>
    <Button color="inherit" component={Link} to="/notes">
      notes
    </Button>
    <Button color="inherit" component={Link} to="/users">
      users
    </Button>   
    {user
      ? <em>{user} logged in</em>
      : <Button color="inherit" component={Link} to="/login">
          login
        </Button>
    }                              
  </Toolbar>
</AppBar>

对比

npm包流行程度对比查询：https://www.npmtrends.com/
其他库：
https://bulma.io/
https://ant.design/
https://get.foundation/
https://chakra-ui.com/
https://tailwindcss.com/
https://semantic-ui.com/

Styled components

styled-components允许使用tagged templates语法定义样式
安装

npm install styled-components

将普通元素定义为带样式的组件

import styled from 'styled-components'
const Button = styled.button`
  background: Bisque;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid Chocolate;
  border-radius: 3px;
`
const Input = styled.input`
  margin: 0.25em;
`
const Page = styled.div`
  padding: 1em;
  background: papayawhip;
`
const Navigation = styled.div`
  background: BurlyWood;
  padding: 1em;
`
const Footer = styled.div`
  background: Chocolate;
  padding: 1em;
  margin-top: 1em;
`

使用定义了样式的组件(元素)

const Login = (props) => {
  // ...
  return (
    <div>
      <h2>login</h2>
      <form onSubmit={onSubmit}>
        <div>
          username:
          <Input />
        </div>
        <div>
          password:
          <Input type='password' />
        </div>
        <Button type="submit" primary=''>login</Button>
      </form>
    </div>
  )
}
const App = () => {
  // ...
  return (
    <Page>
      <Navigation>
        <Link style={padding} to="/">home</Link>
        <Link style={padding} to="/notes">notes</Link>
        <Link style={padding} to="/users">users</Link>
        {user
          ? <em>{user} logged in</em>
          : <Link style={padding} to="/login">login</Link>
        }
      </Navigation>
      <Switch>
        <Route path="/notes/:id">
          <Note note={note} />
        </Route>
        <Route path="/notes">
          <Notes notes={notes} />
        </Route>
        <Route path="/users">
          {user ? <Users /> : <Redirect to="/login" />}
        </Route>
        <Route path="/login">
          <Login onLogin={login} />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
      <Footer>
        <em>Note app, Department of Computer Science 2021</em>
      </Footer>
    </Page>
  )
}

样式化组件在最近一段时间内一直受到欢迎，很多人认为这是定义样式到 React 应用的最佳方式。