10 種為React應用程式設計樣式的方法

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

翻譯 | 楊小二

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

通常，為你的 React 應用程式選擇樣式系統并不像看起來那麼難。此外，你不必使用文章中列出的全部方法。

當你了解所有可用方法時，你就可以根據情況選擇出最佳的選項。

1、内聯CSS樣式

内聯 CSS 與正常樣式标簽相同。

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 生态系統中很常見，而且很酷。唯一的問題是将樣式與另一個元件隔離是非常困難的。

我們建立正常樣式表并将它們導入到你的元件中。

.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;      

預設情況下，Create-React-App 執行了一些步驟，通過使用 PostCSS 使其可用于生産。

3、CSS 子產品

CSS 子產品通過為每個類建立唯一的類名來解決樣式隔離問題。

Create-React-App 具有對 CSS 子產品的内置支援。CSS Module 允許我們對檔案使用相同的類名，而不必擔心 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 styles
import "./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 預處理器

我們可以用 webpack loader 來使用 SASS 、 SCSS 、 LESS 、 STYLUS 等。但不幸的是，CRA 預設不支援它們中的任何一個。

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

npm i node-sass      

更多内容請檢視官方文檔，位址：https://create-react-app.dev/docs/adding-a-sass-stylesheet/

5、樣式元件

styled-component 允許我們編寫實際的 CSS，而不是将 CSS 編寫為 JS。

通過 npm 安裝樣式化元件。

npm i styled-components      

讓我們使用樣式元件建立相同的樣式。

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 使用标記模闆文字來建立樣式。

6、React JSS

允許 JSS 以聲明式、無沖突和可重用的方式使用 Javascript 建立 CSS。

使用 npm 安裝 react-jss。

npm i react-jss      

然後使用 createUseStyles 建立樣式。

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 建立内聯樣式的工具。Radium 做了一些處理來消除死代碼。

預設情況下，react 不允許帶有僞選擇器的内聯樣式，例如 :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 中建立封裝好的樣式。

使用 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 的内聯樣式系統。它在不犧牲性能的情況下，給開發人員提供一流的開發體驗。

使用 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、實用程式架構

建立實用程式架構是為了避免建立樣式表。最著名的實用程式架構是 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;      

希望你喜歡這篇文章。

感謝你的閱讀，祝程式設計愉快！

學習更多技能

請點選下方公衆号

、