CSS-in-JS 是一種將 CSS 樣式直接寫在 JavaScript 或 TypeScript 代碼中的方法，1. 它通過在組件內(nèi)定義樣式來避免全局沖突；2. 使用庫(kù)如 styled-components 或 Emotion 支持動(dòng)態(tài)樣式、偽類和媒體查詢；3. 提供作用域樣式、動(dòng)態(tài)定制、代碼共置和主題支持；4. 但存在運(yùn)行時(shí)開銷、包體積增大、SSR 復(fù)雜性和學(xué)習(xí)成本；5. 適用于復(fù)雜、動(dòng)態(tài)的 React 應(yīng)用，但在簡(jiǎn)單項(xiàng)目中傳統(tǒng) CSS 或 Tailwind 可能更優(yōu)。因此，CSS-in-JS 提供強(qiáng)大組件化樣式方案，但需權(quán)衡性能與復(fù)雜度。

CSS-in-JS is a styling approach in web development where you write CSS styles directly inside your JavaScript (or TypeScript) code, typically in React applications. Instead of writing styles in separate .css files, you define them as JavaScript objects or use template literals right where your components are defined.

This technique became popular with the rise of component-based frameworks, especially React, because it helps you scope styles to specific components and avoid global CSS conflicts.

How It Works

Instead of this:

/* Button.css */
.button {
  background: blue;
  color: white;
  padding: 10px;
}

You do something like this:

const Button = () => {
  const buttonStyle = {
    background: 'blue',
    color: 'white',
    padding: '10px'
  };

  return <button style={buttonStyle}>Click me</button>;
};

But real CSS-in-JS goes further using libraries that support dynamic styling, pseudo-classes, media queries, and more — things you can't easily do with plain inline styles.

Popular CSS-in-JS Libraries

• Styled-components (uses template literals)

  const StyledButton = styled.button`
    background: blue;
    color: white;
    padding: 10px;
    &:hover {
      background: darkblue;
    }
  `;

• Emotion (supports both object and string styles)

• JSS (generates class names from JavaScript objects)

These libraries generate unique class names and inject CSS into the DOM at runtime, ensuring styles are scoped to the component.

Key Benefits

• Scoped styles: No more worrying about class name collisions.
• Dynamic styling: Easily change styles based on props or state.

  const Button = ({ primary }) => (
    <StyledButton $primary={primary}>Click</StyledButton>
  );

• Co-located code: Styles live right next to the component logic, making it easier to maintain.
• Theming support: Pass theme variables (like colors, fonts) through context.

Common Criticisms

• Runtime overhead: Styles are processed in the browser, which can impact performance.
• Larger bundle size: You're bundling styling logic with JavaScript.
• SSR complexity: Requires extra setup for server-side rendering to avoid flash of unstyled content.
• Learning curve: Adds another layer of abstraction.

When to Use It?

• You're building a complex React app with many reusable components.
• You need highly dynamic or themeable UIs.
• Your team prefers keeping styles close to components.

But if you're building a simpler app or care a lot about performance and minimal JavaScript, traditional CSS, CSS Modules, or utility-first frameworks like Tailwind CSS might be better choices.

Basically, CSS-in-JS gives you powerful, component-scoped styling — but it's not always the simplest or most performant option.

以上是什么是CSS-In-JS？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！