面试题：Next.js 中 styled - components 的基础使用

Question

在一个简单的 Next.js 页面组件中，使用 styled - components 创建一个按钮样式，并将其应用到按钮元素上，展示如何设置按钮的背景颜色、文字颜色和点击后的样式变化。请写出完整的代码实现过程，包括相关的导入语句。

Answer 1

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

// 创建按钮样式
const StyledButton = styled.button`
  background-color: blue;
  color: white;
  &:active {
    background-color: green;
  }
`;

const MyPage = () => {
  return (
    <div>
      <StyledButton>点击我</StyledButton>
    </div>
  );
};

export default MyPage;