框架集成：07 React样式与HTML - 详细教程与实战指南

// 样式对象定义
const containerStyle = {
  padding: '20px',
  borderRadius: '12px',
  backgroundColor: theme === 'dark' ? '#2c3e50' : '#ffffff',
  color: theme === 'dark' ? '#ecf0f1' : '#333333',
  transition: 'all 0.3s ease',
  boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
};

// 动态样式：根据状态变化
const activeButtonStyle = {
  ...buttonBaseStyle,
  backgroundColor: isActive ? '#27ae60' : '#e74c3c',
  color: 'white',
  transform: isActive ? 'scale(1.05)' : 'scale(1)'
};

// 在JSX中使用
<div style={containerStyle}>
  <button style={activeButtonStyle} onClick={() => setIsActive(!isActive)}>
    {isActive ? '已激活' : '未激活'}
  </button>
</div>

/* Button.module.css */
.btn { padding: 10px 20px; border-radius: 6px; }
.primary { background: #667eea; color: white; }

/* 编译后生成唯一类名 */
.Button_btn_1a2b3 { padding: 10px 20px; ... }
.Button_primary_4c5d6 { background: #667eea; ... }

/* 在组件中使用 */
import styles from './Button.module.css';
function Button() {
  return <button className={styles.btn + ' ' + styles.primary}>
    Click
  </button>;
  // 或者使用模板字符串
  return <button className={`${styles.btn} ${styles.primary}`}>
    Click
  </button>;
}

import styled from 'styled-components';

// 创建带样式的组件
const Button = styled.button`
  padding: 10px 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: ${props => props.primary ? '#667eea' : 'transparent'};
  color: ${props => props.primary ? 'white' : '#667eea'};
  border: ${props => props.primary ? 'none' : '2px solid #667eea'};

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
`;

// 使用
<Button primary>主要按钮</Button>
<Button>次要按钮</Button>

// React中使用Tailwind的条件类名
function Card({ isActive, variant }) {
  return (
    <div className={`
      p-4 rounded-lg transition-all
      ${isActive ? 'bg-green-100 border-green-500' : 'bg-gray-100 border-gray-300'}
      ${variant === 'large' ? 'p-8 text-lg' : 'p-4 text-base'}
    `}>
      内容
    </div>
  );
}

// 推荐使用clsx库管理条件类名
import clsx from 'clsx';
<div className={clsx(
  'p-4 rounded-lg',
  { 'bg-green-100': isActive },
  { 'bg-gray-100': !isActive }
)}>

// 1. 安装Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// 2. tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",  // 扫描React组件
  ],
  theme: {
    extend: {
      // 自定义主题
      colors: {
        primary: '#667eea',
        secondary: '#764ba2',
      }
    },
  },
  plugins: [],
}

// 3. index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// 4. 在组件中使用
function Button() {
  return (
    <button className="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg">
      自定义颜色按钮
    </button>
  );
}

// 不推荐：内联样式写太多
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '20px', backgroundColor: '#f0f0f0', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>

// 推荐：提取样式对象
const containerStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  padding: '20px',
  backgroundColor: '#f0f0f0',
  borderRadius: '8px',
  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
};
<div style={containerStyle}>

// 不推荐：在render中创建styled组件
function BadComponent() {
  const StyledDiv = styled.div`color: red;`; // 每次渲染创建新组件!
  return <StyledDiv>内容</StyledDiv>;
}

// 推荐：在组件外部定义styled组件
const StyledDiv = styled.div`color: red;`;
function GoodComponent() {
  return <StyledDiv>内容</StyledDiv>;
}

// 不推荐：模板字符串拼接类名
<div className={`base-class ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}>

// 推荐：使用clsx管理条件类名
import clsx from 'clsx';
<div className={clsx('base-class', { active: isActive, disabled: isDisabled })}>