react项目中如何书写css

一:问题:

在 vue 项目中,我们书写css的方式很简单,就是在 .vue文件中写style标签,然后加上scope属性,就可以隔离当前组件的样式,但是在react中,是没有这个东西的,如果直接引入css文件,很可能会导致样式覆盖的问题。

二:常见书写css方法:

1.直接引入css文件

可以创建一个普通的 .css 文件并在组件中导入它。这是最传统和简单的方法。但是这种很容易出现样式覆盖的问题,所以可以加一些特殊的标识之类的做区分:

css文件:

css 复制代码
.login-example {
    color: blue;
    font-size: 20px;
}

jsx文件:

js 复制代码
import React from 'react';
import './styles.css';

const MyComponent = () => (
    <div className="login-example">
        Hello, world!
    </div>
);

export default MyComponent;

给每个页面加一个特殊的名称,适用于页面不多的情况。

2.行内样式:

在 React 中,也可以使用内联样式:

js 复制代码
import React from 'react';

const MyComponent = () => (
    <div style={{ color: 'blue', fontSize: '20px' }}>
        Hello, world!
    </div>
);

export default MyComponent;

直接书写行内样式,通常只用于一些很简单的样式 ,或者需要动态计算样式 的情况;通篇使用内联样式是不可取的。

3.CSS Modules

CSS Modules 可以将 CSS 作用域限制在单个组件内,避免全局污染。

步骤:

(1). 创建一个 CSS Module 文件,文件名格式为 *.module.css,例如 styles.module.css:

css 复制代码
.example {
   color: blue;
   font-size: 20px;
}

(2). 在 React 组件中导入这个 CSS Module 文件:

js 复制代码
import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => (
    <div className={styles.example}>
        Hello, world!
    </div>
);

export default MyComponent;

效果如下:

可以看到,这里的div的class给了哈希值,就避免了全局污染。

4. 第三方插件

也有许多第三方插件可以供我们使用,像 Styled Components,下面是styled components的用法:

js 复制代码
import React from 'react';
import styled from 'styled-components';

const Example = styled.div`
    color: blue;
    font-size: 20px;
`;

const MyComponent = () => (
    <Example>
        Hello, world!
    </Example>
);

export default MyComponent;

以上就是常用的在react中书写css的方法

相关推荐
无奈何杨1 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭9 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆12 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼22 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子24 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆24 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了25 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆30 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆31 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆31 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js