import React, { useState } from 'react';
import './Button.css'; // 導(dǎo)入樣式文件

const Button = () => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => setIsActive(!isActive);

  return (
    <button
      // 使用三元運(yùn)算符動(dòng)態(tài)決定類名
      className={`btn ${isActive ? 'btn-active' : 'btn-inactive'}`}
      onClick={handleClick}
    >
      {isActive ? '激活中' : '未激活'}
    </button>
  );
};

export default Button;

/* Button.css */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-active {
  background-color: #4CAF50; /* Green */
  color: white;
}

.btn-inactive {
  background-color: #e7e7e7; /* Light grey */
  color: #666;
}

import React, { useState } from 'react';
import './Notification.css';

const Notification = () => {
  const [isError, setIsError] = useState(true);

  return (
    <div
      // 基礎(chǔ)類名 'notification' 始終存在
      // 如果 isError 為 true，則添加 'error' 類名
      className={`notification ${isError && 'error'}`}
    >
      {isError ? '發(fā)生錯(cuò)誤！' : '操作成功！'}
    </div>
  );
};

export default Notification;

/* Notification.css */
.notification {
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid transparent;
  border-radius: 4px;
}

.notification.error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

import React, { useState } from 'react';
import './PlayerCard.css';

const PlayerCard = ({ player }) => {
  const [isSelected, setIsSelected] = useState(false);

  let cardClass = 'player-card'; // 基礎(chǔ)類名

  // 根據(jù)條件拼接類名
  if (isSelected) {
    cardClass += ' selected';
  }
  if (player.isOnline) {
    cardClass += ' online';
  }
  if (player.score > 100) {
    cardClass += ' high-score';
  }

  return (
    <div className={cardClass} onClick={() => setIsSelected(!isSelected)}>
      <h3>{player.name}</h3>
      <p>Score: {player.score}</p>
      <span>{player.isOnline ? '?? Online' : '?? Offline'}</span>
    </div>
  );
};

export default PlayerCard;

/* PlayerCard.css */
.player-card {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.player-card.selected {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.player-card.online {
  background-color: #f8fff8;
}

.player-card.high-score {
  font-weight: bold;
  color: #e65100;
}

npm install classnames
# 或
yarn add classnames

import React, { useState } from 'react';
import classNames from 'classnames';
import './Button.css'; // 同樣的樣式文件

const Button = () => {
  const [isActive, setIsActive] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
    // 模擬異步操作
    setTimeout(() => {
      setIsActive(!isActive);
      setIsLoading(false);
    }, 1000);
  };

  // 使用 classnames，語法極其清晰
  const btnClass = classNames('btn', {
    'btn-active': isActive,
    'btn-inactive': !isActive,
    'loading': isLoading, // 添加一個(gè)加載狀態(tài)樣式
  });

  return (
    <button className={btnClass} onClick={handleClick} disabled={isLoading}>
      {isLoading ? '加載中...' : (isActive ? '激活中' : '未激活')}
    </button>
  );
};

export default Button;

/* 添加 loading 樣式 */
.btn.loading {
  opacity: 0.7;
  cursor: wait;
}

import React from 'react';
import classNames from 'classnames';
import './Message.css';

const Message = ({ type, size, isDismissible, children }) => {
  const messageClass = classNames(
    'message', // 始終添加的基類
    `message--${type}`, // 根據(jù) prop 動(dòng)態(tài)生成類名，如 'message--success'
    `message--${size}`, // 如 'message--large'
    {
      'message--dismissible': isDismissible, // 只有當(dāng) isDismissible 為 true 時(shí)添加
      'message--with-icon': type !== 'default' // 非默認(rèn)類型才顯示圖標(biāo)
    }
  );

  return (
    <div className={messageClass}>
      {children}
    </div>
  );
};

Message.defaultProps = {
  type: 'default',
  size: 'medium'
};

export default Message;

/* Message.css */
.message {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
}

.message--success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message--error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.message--large {
  font-size: 1.25rem;
}

.message--dismissible {
  padding-right: 3rem; /* 為關(guān)閉按鈕留出空間 */
}

// Message.module.css
.message {
  composes: base-font from global; /* 從全局樣式組合 */
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  border: 1px solid transparent;
}

.success {
  composes: message; /* 組合 .message 的樣式 */
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.error {
  composes: message;
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.large {
  font-size: 1.25rem;
}

// Message.jsx
import React from 'react';
import classNames from 'classnames';
import styles from './Message.module.css'; // 導(dǎo)入的是一個(gè) styles 對象

const Message = ({ type, size, children }) => {
  // 通過 styles[className] 來引用 CSS Modules 生成的唯一類名
  const messageClass = classNames(
    styles.message, // 對應(yīng) .message 的哈希類名
    styles[type],   // 動(dòng)態(tài)鍵值，如 styles['success']
    styles[size]    // 如 styles['large']
  );

  return (
    <div className={messageClass}>
      {children}
    </div>
  );
};

export default Message;

npm install styled-components

import React from 'react';
import styled, { css } from 'styled-components';

// 創(chuàng)建一個(gè)帶樣式的 <button> 組件
// 它的背景色和顏色由 `primary` prop 動(dòng)態(tài)決定
const StyledButton = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;

  /* 基于 primary prop 的動(dòng)態(tài)樣式 */
  background: ${props => props.primary ? '#4CAF50' : '#e7e7e7'};
  color: ${props => props.primary ? 'white' : '#666'};

  /* 基于 disabled prop 的動(dòng)態(tài)樣式 */
  ${props => props.disabled && css`
    opacity: 0.5;
    cursor: not-allowed;
  `}

  /* 懸停效果，也基于 primary prop */
  &:hover {
    ${props => !props.disabled && css`
      background: ${props.primary ? '#45a049' : '#d7d7d7'};
    `}
  }
`;

const Button = ({ isPrimary, isDisabled, onClick, children }) => {
  return (
    <StyledButton
      primary={isPrimary} // 這些 props 會(huì)被傳遞給 styled-component
      disabled={isDisabled}
      onClick={onClick}
    >
      {children}
    </StyledButton>
  );
};

export default Button;