10 种为React应用程序设计样式的方法
共 5019字,需浏览 11分钟
·
2021-08-10 14:42
英文 | https://javascript.plainenglish.io/10-ways-to-style-a-react-application-29db8f1f8fd0
翻译 | 杨小二
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;
希望你喜欢这篇文章。
感谢你的阅读,祝编程愉快!
学习更多技能
请点击下方公众号