10 种为React应用程序设计样式的方法

共 5019字,需浏览 11分钟

 ·

2021-08-10 14:42

英文 | 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 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 预处理器

我们可以用 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;

希望你喜欢这篇文章。

感谢你的阅读,祝编程愉快!


学习更多技能

请点击下方公众号

浏览 25
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报