基本概念

样式表使我们能够以结构化的方式定义 CSS 样式，从而提高代码的可维护性。Styled-jsx 是一个基于 React 的组件化样式库，它允许我们将 CSS 直接嵌入到 JavaScript 中，通过模板语法提供清晰的命名和逻辑结构。这样可以将样式逻辑与组件逻辑分离，使得组件的开发更加模块化和易于理解。

使用原因

1. 代码清晰：组件只负责描述其外观，通过 Styled-jsx，我们可以在定义组件结构的同时直接指定样式，代码更加直观。
2. 开发效率：避免了在 JavaScript 代码和 CSS 文件之间频繁切换，减少上下文切换带来的心理负担，提高开发速度。
3. 维护性：通过模块化和声明式的样式编写，易于理解、修改和维护。

首先，确保你的项目使用了 npm 或 yarn 进行包管理。然后，安装 styled-components 包以及 @types/styled-components 以支持类型定义和自动补全。

npm install styled-components @types/styled-components

或者

yarn add styled-components @types/styled-components

接下来，导入 styled-components 并创建一个基础样式组件：

import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 10px 16px;
  margin: 4px 2px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
`;

export default Button;

在组件中使用创建的样式组件：

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <h1>Hello, Styled-jsx!</h1>
      <Button>Click me!</Button>
    </div>
  );
}

export default App;

动态应用样式

利用 JavaScript 表达式为组件赋予动态样式：

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.color}; /* 动态颜色 */
  color: white;
  padding: 10px 16px;
  margin: 4px 2px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
`;

function App() {
  const buttonText = 'Dynamic color';
  const buttonColor = 'red'; // 动态颜色值

  return (
    <div>
      <h1>Hello, Styled-jsx!</h1>
      <Button color={buttonColor}>{buttonText}</Button>
    </div>
  );
}

export default App;

创建可复用的样式

通过定义模式化组件层次，以创建可复用的样式：

import React from 'react';
import styled from 'styled-components';

const ColorButton = styled.button`
  background-color: ${props => props.color};
  color: white;
  padding: 10px 16px;
  margin: 4px 2px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
`;

const RedButton = styled(ColorButton)`
  &.red {
    background-color: red;
  }
`;

const GreenButton = styled(ColorButton)`
  &.green {
    background-color: green;
  }
`;

function App() {
  return (
    <div>
      <h1>Hello, Styled-jsx!</h1>
      <RedButton className="red">Red button</RedButton>
      <GreenButton className="green">Green button</GreenButton>
    </div>
  );
}

export default App;

模板字符串定制样式

使用模板字符串动态生成复杂的 CSS 规则：

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  ${props => `
    background-color: ${props.color};
    color: white;
    padding: 10px 16px;
    margin: 4px 2px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  `}
`;

function App() {
  return (
    <div>
      <h1>Hello, Styled-jsx!</h1>
      <Button color="blue">Blue button</Button>
    </div>
  );
}

export default App;

函数创建动态样式规则

通过函数生成动态样式：

import React from 'react';
import styled from 'styled-components';

const getButtonStyles = (color: string) => `
  background-color: ${color};
  color: white;
  padding: 10px 16px;
  margin: 4px 2px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
`;

const Button = styled.button`
  ${props => getButtonStyles(props.color)}
`;

function App() {
  return (
    <div>
      <h1>Hello, Styled-jsx!</h1>
      <Button color="yellow">Yellow button</Button>
    </div>
  );
}

export default App;

在现有项目中集成 Styled-jsx 时：

• 安装：在项目根目录下运行 npm install styled-components @types/styled-components 或 yarn add styled-components @types/styled-components。
• 配置：确保所有 JavaScript 文件使用 .tsx 扩展名以支持 TypeScript，或在 TypeScript 项目中忽略 JSX。

为了优化性能：

• 批量渲染：在大型项目中，批量渲染样式可以减少 JavaScript 执行时间。
• 样式缓存：使用 styled-components 的 createGlobalStyle 函数来缓存全局样式，减少重渲染次数。

设计

假设我们要构建一个可配置的下拉菜单组件，其样式应根据用户自定义的参数进行调整。

实现

首先定义菜单项和下拉菜单的样式组件：

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

const MenuItem = styled.button`
  cursor: pointer;
  padding: 8px;
  &:hover {
    background-color: #ddd;
  }
`;

const DropdownMenu = styled.div`
  position: absolute;
  background-color: white;
  border: 1px solid #ddd;
  z-index: 1;
`;

const Dropdown = styled.div`
  position: relative;
`;

const DropdownMenuComponent = ({ items, isOpen }) => {
  const handleMenuOpen = () => {
    // 处理菜单打开逻辑
  };

  const handleItemClick = (item) => {
    // 处理菜单项点击逻辑
  };

  return (
    <Dropdown isOpen={isOpen} onClick={handleMenuOpen}>
      <button onClick={handleMenuOpen}>Menu</button>
      {isOpen && (
        <DropdownMenu>
          {items.map((item) => (
            <MenuItem
              key={item.text}
              onClick={() => handleItemClick(item)}
            >
              {item.text}
            </MenuItem>
          ))}
        </DropdownMenu>
      )}
    </Dropdown>
  );
};

export default DropdownMenuComponent;

通过以上步骤，你可以从零开始构建一个功能丰富且样式清晰的组件，利用 Styled-jsx 提高开发效率和应用质量。