react项目中如何书写css

作者：System 时间：2024年08月17日分类：所有,css 字数：1502

在React项目中书写CSS可以通过以下几种方式：

内联样式（Inline Styles）：直接在JSX元素上通过style属性书写CSS。




const style = {
  color: 'blue',
  backgroundColor: 'yellow'
};
 
const MyComponent = () => <div style={style}>Hello World!</div>;

CSS模块：使用CSS模块可以避免类名冲突，CSS模块会自动为类名添加唯一的前缀。




// MyComponent.module.css
.error {
  color: red;
}
 
.success {
  color: green;
}
 
// MyComponent.js
import React from 'react';
import styles from './MyComponent.module.css';
 
const MyComponent = () => (
  <div>
    <span className={styles.error}>Error Message</span>
    <span className={styles.success}>Success Message</span>
  </div>
);

外部CSS文件：将CSS样式写在单独的文件中，并在组件中引入。




/* styles.css */
.button {
  padding: 10px 20px;
  background-color: #f2f2f2;
}




// MyComponent.js
import React from 'react';
import './styles.css'; // 引入CSS文件
 
const MyComponent = () => <button className="button">Click Me</button>;

CSS-in-JS库：例如styled-components或emotion，它们允许你用JavaScript来写CSS。




import styled from 'styled-components';
 
const StyledButton = styled.button`
  padding: 10px 20px;
  background-color: #f2f2f2;
`;
 
const MyComponent = () => <StyledButton>Click Me</StyledButton>;

全局CSS文件：如果你想要某些样式在全局范围内生效，可以在public/index.html中引入外部CSS文件。




<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <link rel="stylesheet" href="%PUBLIC_URL%/global.css">
</head>
...

选择哪种方式取决于你的项目需求和个人偏好。通常，CSS模块和外部CSS文件用于保持组件样式的局部作用域，而CSS-in-JS库提供了一种在JavaScript中编写样式的方法。

react项目中如何书写css

评论已关闭

推荐阅读