如何在不同维度使用 CSS(CSS-in-JS)？

CSS-in-JS 是一种将 CSS 代码嵌入 JavaScript 层级的编程模式，它允许您创建不同类型、不同维度的 CSS。这个技术已经流行了很多年，尽管仍然有一些开发者对此存在争议。但是，对于那些喜欢使用 CSS-in-JS 的开发者们，下面我们将介绍一些如何使用 CSS-in-JS 在不同维度处理 CSS 的方法。

在组件级别应用 CSS

最常见的 CSS-in-JS 代码的等级是在组件级别，这是对于应用程序或站点的 UI 管理至关重要。在这种情况下，可以使用许多实用的库和框架来优化这样的代码。例如，React 中最常用的 CSS-in-JS 库有 Styled Components 和 Emotion。

以下是一个例子：

import styled from 'styled-components';

const Button = styled.button`
  padding: 12px;
  border-radius: 4px;
  background-color: #5e5e5e;
  color: #fff;
`;

function MyComponent() {
  return (
    <div>
      <Button> Click me </Button>
    </div>
  )
}

上述代码中，我们使用 styled-components 库来创建一个可以在应用中重复使用的按钮组件。在 MyComponent 组件中，我们可以轻松地重复使用这个按钮组件，而不必每次都重新编写 CSS 样式表。

在主题级别应用 CSS

主题是一个非常重要的概念，尤其对于 UI 库和框架来说。通常，UI 库的用户期望可以基于他们的需求和品牌自定义它们的 UI 组件，同时 UI 库的开发者需要提供一些预定义的主题供用户去选择。

以下是一个例子：

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

const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    danger: '#dc3545',
    warning: '#ffc107',
    info: '#17a2b8',
    light: '#f8f9fa',
    dark: '#343a40',
  },
  fontSizes: {
    small: '1em',
    medium: '2em',
    large: '3em',
  },
};

const Button = styled.button`
  margin: ${({ theme }) => theme.spacing};
  padding: ${({ theme }) => theme.padding};
  font-size: ${({ theme, size }) => theme.fontSizes[size]};
  background-color: ${({ theme, variant }) => theme.colors[variant]};
  color: ${({ theme }) => theme.colors.white};
  border-radius: 4px;
  border: none;
`;

function MyComponent() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button variant='primary' size='medium'> Click me </Button>
      </div>
    </ThemeProvider>
  )
}

在上面的代码中，我们在主题级别上定义了颜色和字体大小，然后将其传入 Button 组件中。这样，我们就可以在不改变组件内部 CSS 的情况下定制组件样式了。

在全局级别应用 CSS

在某些情况下，您可能需要在全局 CSS 水平上应用 CSS，以便样式能够在整个应用范围内生效。使用 CSS-in-JS 技术，也可以使用几种工具来实现这一点。例如，使用 createGlobalStyle 组件可以方便地设置全局样式。

以下是一个例子：

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

const GlobalStyle = createGlobalStyle`
  body {
    background-color: #f8f8f8;
    font-family: Arial, sans-serif;
  }
`;

const Heading = styled.h1`
  font-size: 3em;
  color: ${({ theme }) => theme.colors.primary};
`;

function MyComponent() {
  return (
    <>
      <GlobalStyle />
      <Heading> Hello World </Heading>
    </>
  )
}

此处定义了一个全局样式，该样式应用于整个页面，并且能够影响页面中的所有元素，在使用时可以非常方便。

总结：

他们是只是针对 CSS-in-JS 中的一些层级和维度的简单示例，如组件层级、主题和全局层级。在实际情况下，您可以将 CSS-in-JS 应用到各种不同的层级和维度上，从而满足您的具体设计和编程需求。