面试题：Next.js中使用Styled - Components实现局部作用域样式的优势及实践

Styled - Components相比于CSS Modules在Next.js中实现局部作用域CSS样式的优势

更直观的样式编写：Styled - Components采用JavaScript模板字符串的方式编写CSS，能直接在JavaScript代码中操作样式，而CSS Modules需要在单独的CSS文件中编写，然后通过导入使用，在逻辑上不够直观。例如，在条件渲染样式时，Styled - Components可以更方便地结合JavaScript逻辑。
自动作用域：Styled - Components创建的组件天然具有局部作用域，无需像CSS Modules那样手动为每个类名添加唯一标识来确保局部性，减少了命名冲突的可能性。
动态样式：它能更便捷地根据组件的props动态改变样式。通过在模板字符串中使用JavaScript表达式，可以轻松实现根据不同props值展示不同样式。

在Next.js项目中用Styled - Components创建具有局部样式的按钮组件并处理不同状态样式的示例

安装依赖：首先确保项目安装了styled - components。在项目目录下运行npm install styled - components 或 yarn add styled - components。
创建按钮组件：在Next.js项目的组件目录（例如components）下创建一个Button.js文件。

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

// 创建Styled Button
const StyledButton = styled.button`
  background - color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border - radius: 5px;
  cursor: pointer;

  // 处理hover状态
  &:hover {
    background - color: darkblue;
  }

  // 根据props处理不同状态
  ${props => props.disabled && `
    background - color: gray;
    cursor: not - allowed;
  `}
`;

const Button = ({ children, disabled }) => {
  return <StyledButton disabled={disabled}>{children}</StyledButton>;
};

export default Button;

使用按钮组件：在页面（例如pages/index.js）中引入并使用该按钮组件。

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

const HomePage = () => {
  return (
    <div>
      <Button>正常按钮</Button>
      <Button disabled>禁用按钮</Button>
    </div>
  );
};

export default HomePage;

上述代码中，StyledButton通过styled - components创建，设置了默认样式、hover状态样式以及根据disabled props处理的禁用状态样式。Button组件接收children和disabled props，并传递给StyledButton，实现了一个具有局部样式且能处理不同状态的按钮组件。

星途面试题库

面试题：Next.js中使用Styled - Components实现局部作用域样式的优势及实践

知识考点

面试题答案

Styled - Components相比于CSS Modules在Next.js中实现局部作用域CSS样式的优势

在Next.js项目中用Styled - Components创建具有局部样式的按钮组件并处理不同状态样式的示例