英文 | https://javascript.plainenglish.io/10-ways-to-style-a-react-application-29db8f1f8fd0

翻譯 | 楊小二

React 是一個渲染 UI 的庫，它不關(guān)心樣式。React 是一件好事，但它也讓我們獨(dú)自一人在一個有很多選擇的大海中。

通常，為你的 React 應(yīng)用程序選擇樣式系統(tǒng)并不像看起來那么難。此外，你不必使用文章中列出的全部方法。

當(dāng)你了解所有可用方法時，你就可以根據(jù)情況選擇出最佳的選項(xiàng)。

1、內(nèi)聯(lián)CSS樣式

內(nèi)聯(lián) CSS 與常規(guī)樣式標(biāo)簽相同。

import React from "react";const container = {    padding: 12,    background: 'red'}
const Homepage = () => {  return (    <div style={container}>      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </div>  );};
export default Homepage;

2、樣式表

樣式表在 React 生態(tài)系統(tǒng)中很常見，而且很酷。唯一的問題是將樣式與另一個組件隔離是非常困難的。

我們創(chuàng)建常規(guī)樣式表并將它們導(dǎo)入到你的組件中。

.container{  width: 100%;  padding: 12px;  background: red;}

import React from "react";import "homepage.css";
const Homepage = () => {  return (    <div className="container">      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </div>  );};

export default Homepage;

默認(rèn)情況下，Create-React-App 執(zhí)行了一些步驟，通過使用 PostCSS 使其可用于生產(chǎn)。

3、CSS 模塊

CSS 模塊通過為每個類創(chuàng)建唯一的類名來解決樣式隔離問題。

Create-React-App 具有對 CSS 模塊的內(nèi)置支持。CSS Module 允許我們對文件使用相同的類名，而不必?fù)?dān)心 CSS 名稱沖突。

例如，我們在兩個不同的文件上有相同的類容器。

// homepage.module.css.container{  padding:12px;  background:red;}

如果我們在另一個文件中有相同的類名。

// contactpage.module.css.container{  padding: 12px;  background:green;}

import React from "react";import styles from "./homepage.module.css"; // Import css modules stylesheet as stylesimport "./another-stylesheet.css"; // Import regular stylesheet
 const Homepage = () => {  return (    <div className={styles.homepage}>      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </div>  );};
export default Homepage;

4、CSS 預(yù)處理器

我們可以用 webpack loader 來使用 SASS 、 SCSS 、 LESS 、 STYLUS 等。但不幸的是，CRA 默認(rèn)不支持它們中的任何一個。

我們可以通過安裝 node-sass 來使用 SCSS 或 SASS

npm i node-sass

更多內(nèi)容請查看官方文檔，地址：https://create-react-app.dev/docs/adding-a-sass-stylesheet/

5、樣式組件

styled-component 允許我們編寫實(shí)際的 CSS，而不是將 CSS 編寫為 JS。

通過 npm 安裝樣式化組件。

npm i styled-components

讓我們使用樣式組件創(chuàng)建相同的樣式。

import React from "react";import styled from "styled-components";
const Container =  styled.div`    padding: 12px;    background: red;`;
 const Homepage = () => {  return (    <Container>      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </Container>  );};
export default Homepage;

Styled-Component 使用標(biāo)記模板文字來創(chuàng)建樣式。

6、React JSS

允許 JSS 以聲明式、無沖突和可重用的方式使用 Javascript 創(chuàng)建 CSS。

使用 npm 安裝 react-jss。

npm i react-jss

然后使用 createUseStyles 創(chuàng)建樣式。

import React from "react";import { createUseStyles } from "react-jss";
const useStyles = createUseStyles({  container: {    padding: "20px",    backgroundColor: "red"  },  button: {    backgroundColor: "green",    color: "white"  }});
const Homepage = () => {// Use Styles const classes = useStyles();
  return (    <div className={classes.container}>      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </div>  );};
export default Homepage;

7、Radium

Radium 是一組使用 javascript 創(chuàng)建內(nèi)聯(lián)樣式的工具。Radium 做了一些處理來消除死代碼。

默認(rèn)情況下，react 不允許帶有偽選擇器的內(nèi)聯(lián)樣式，例如 :hover 、:focus 等。

使用 npm 安裝Radium。

npm i radium

import React from "react";import Radium from 'radium';
const Homepage = () => { const style = {     padding:"12px",     background:'red',     ":hover":{         background:'blue'     } }
  return (    <div style={style}>      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </div>  );};
export default Radium(Homepage);

8、React Shadow

React Shadow 允許我們使用Shadow DOM。它可以在React 中創(chuàng)建封裝好的樣式。

使用 npm 安裝使用 Reach Shadow

npm i react-shadow

import React from "react";import root from "react-shadow";import styles from "homepage.css";
const Homepage = () => {  return (    <root.div>      <div className="container">        <h1>Welcome to React</h1>        <p>This is a simple homepage</p>      </div>      <style type="text/css">{styles}</style>    </root.div>  );};
export default Homepage;

9、JSX Style

jsxstyle 是 React 和 Preact 的內(nèi)聯(lián)樣式系統(tǒng)。它在不犧牲性能的情況下，給開發(fā)人員提供一流的開發(fā)體驗(yàn)。

使用 npm 安裝 jsxstyle

import React from "react";import { Block } from "jsxstyle";
const Homepage = () => {  return (    <Block     padding={20}     backgroundColor="#f5f5f5"     borderRadius={5}>      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </Block>  );};
export default Homepage;

10、實(shí)用程序框架

創(chuàng)建實(shí)用程序框架是為了避免創(chuàng)建樣式表。最著名的實(shí)用程序框架是 tailwindcss

CRA 本身不支持 tailwindcss，我們需要使用一些 CRA 覆蓋，如 CRACO。

更多信息，請查看官方文檔，地址：https://tailwindcss.com/docs/guides/create-react-app

import React from "react";
const Homepage = () => {  return (    <div className="bg-white p-12">      <h1>Welcome to React</h1>      <p>This is a simple homepage</p>    </div>  );};
export default Homepage;

希望你喜歡這篇文章。

感謝你的閱讀，祝編程愉快！

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號

10 種為React應(yīng)用程序設(shè)計(jì)樣式的方法

學(xué)習(xí)更多技能請點(diǎn)擊下方公眾號

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號