当前位置：首页 > React

react样式如何设定

2026-02-11 23:39:22React

内联样式

在React中可以直接使用内联样式，通过JavaScript对象传递样式属性。样式属性需要采用驼峰命名法，例如backgroundColor而非background-color。

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

function App() {
  return <div style={divStyle}>Hello World</div>;
}

CSS样式表

创建单独的CSS文件并在组件中导入是最常见的方式。这种方式保持了样式与逻辑的分离，便于维护。

/* styles.css */
.container {
  padding: 20px;
  margin: 10px;
}

import './styles.css';

function App() {
  return <div className="container">Content</div>;
}

CSS Modules

CSS Modules提供了局部作用域的CSS，避免全局污染。文件名需以.module.css结尾，通过对象属性访问类名。

/* styles.module.css */
.title {
  font-size: 24px;
  color: red;
}

import styles from './styles.module.css';

function App() {
  return <h1 className={styles.title}>Title</h1>;
}

Styled Components

使用styled-components库可以创建带样式的组件，样式直接写在JavaScript中，支持动态样式和主题。

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 10px 20px;
`;

function App() {
  return (
    <div>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
    </div>
  );
}

Tailwind CSS

Tailwind CSS通过实用类(utility classes)快速构建界面，无需编写自定义CSS。需先安装配置Tailwind。

function App() {
  return (
    <div className="p-4 bg-gray-100">
      <h1 className="text-xl font-bold text-blue-600">Heading</h1>
    </div>
  );
}

动态样式

根据状态或属性动态改变样式，可以结合内联样式或CSS类名条件渲染。

function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button 
      style={{ color: isActive ? 'red' : 'black' }}
      className={isActive ? 'active' : ''}
      onClick={() => setIsActive(!isActive)}
    >
      Toggle
    </button>
  );
}

动画效果

使用CSS动画或第三方库如framer-motion实现复杂动画效果。

react样式如何设定

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      animate={{ x: 100 }}
      transition={{ duration: 0.5 }}
    >
      Animated Element
    </motion.div>
  );
}