样式处理 #

function StyledComponent() {
  return (
    <div style={{
      color: 'red',
      fontSize: '16px',
      backgroundColor: '#f0f0f0',
      padding: '20px'
    }}>
      Styled Content
    </div>
  );
}

function DynamicStyle() {
  const [isActive, setIsActive] = createSignal(false);

  return (
    <button
      style={{
        backgroundColor: isActive() ? 'green' : 'gray',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '4px'
      }}
      onClick={() => setIsActive(!isActive)}
    >
      {isActive() ? 'Active' : 'Inactive'}
    </button>
  );
}

function CSSVariables() {
  const [theme, setTheme] = createSignal({
    primary: '#007bff',
    secondary: '#6c757d'
  });

  return (
    <div style={{
      '--primary-color': theme().primary,
      '--secondary-color': theme().secondary
    }}>
      <button class="btn-primary">Primary</button>
    </div>
  );
}

function ClassExample() {
  return (
    <div className="container main">
      <h1 className="title">Hello</h1>
    </div>
  );
}

function DynamicClass() {
  const [isActive, setIsActive] = createSignal(false);

  return (
    <div className={`btn ${isActive() ? 'active' : ''}`}>
      Dynamic Class
    </div>
  );
}

function ClassListExample() {
  const [isActive, setIsActive] = createSignal(false);
  const [isDisabled, setIsDisabled] = createSignal(false);

  return (
    <button
      classList={{
        btn: true,
        'btn-primary': true,
        active: isActive(),
        disabled: isDisabled()
      }}
    >
      Button
    </button>
  );
}

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

function Button(props) {
  return (
    <button className={styles.button}>
      {props.children}
    </button>
  );
}

/* Button.module.css */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

.button:hover {
  background-color: #0056b3;
}

.primary {
  background-color: #007bff;
}

.danger {
  background-color: #dc3545;
}

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

function Button({ variant = 'primary', children }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  );
}

// index.jsx
import './global.css';
import './styles/main.css';

function App() {
  return <div>...</div>;
}

/* 在 CSS Module 中使用全局选择器 */
.container :global(.external-class) {
  color: red;
}

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
};

function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      {children}
    </button>
  );
}

function Card({ title, children }) {
  return (
    <div className="bg-white shadow-lg rounded-lg p-6">
      <h2 className="text-xl font-bold mb-4">{title}</h2>
      <div className="text-gray-600">{children}</div>
    </div>
  );
}

src/
├── styles/
│   ├── global.css
│   ├── variables.css
│   └── utilities.css
├── components/
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.module.css
│   └── Card/
│       ├── Card.jsx
│       └── Card.module.css

// contexts/ThemeContext.jsx
const themes = {
  light: {
    background: '#ffffff',
    text: '#000000',
    primary: '#007bff'
  },
  dark: {
    background: '#1a1a1a',
    text: '#ffffff',
    primary: '#4da3ff'
  }
};

export function ThemeProvider(props) {
  const [themeName, setThemeName] = createSignal('light');
  const theme = createMemo(() => themes[themeName()]);

  return (
    <ThemeContext.Provider value={{ theme, themeName, setThemeName }}>
      <div
        style={{
          'background-color': theme().background,
          'color': theme().text
        }}
      >
        {props.children}
      </div>
    </ThemeContext.Provider>
  );
}