掌握React Styled Components：条件渲染与样式复用实践

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

// 定义一个Styled Component
const HeaderWrapper = styled.div`
  padding: 20px;
  text-align: center;
  font-size: 24px;
  color: white;
  /* 根据props动态设置背景颜色 */
  background-color: ${props => props.hasBackground ? '#3498db' : 'transparent'};
  border-bottom: 1px solid ${props => props.hasBackground ? '#2980b9' : '#ccc'};
  transition: background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
`;

// 在React组件中使用Styled Component
const MyHeader = ({ hasBackground, title }) => {
  return (
    <HeaderWrapper hasBackground={hasBackground}>
      {title}
    </HeaderWrapper>
  );
};

// 使用示例
const App = () => {
  const [showHeaderBg, setShowHeaderBg] = React.useState(true);

  return (
    <div>
      <button onClick={() => setShowHeaderBg(!showHeaderBg)}>
        切换头部背景
      </button>
      <MyHeader hasBackground={showHeaderBg} title="欢迎来到我的应用" />
      <p style={{ marginTop: '20px', padding: '20px' }}>
        这里是页面的其他内容...
      </p>
    </div>
  );
};

export default App;

// 错误示范：重复代码，且 'const Class1, Class2 = styled.div' 语法不正确
const PrimaryButton = styled.button`
  /* 基础样式 */
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  /* 独有样式 */
  background-color: blue;
  color: white;
`;

const SecondaryButton = styled.button`
  /* 基础样式 - 重复 */
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  /* 独有样式 */
  background-color: gray;
  color: white;
`;
// ... 更多重复的样式代码

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

// 定义一个可复用的CSS代码块
const commonButtonStyles = css`
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  &:hover {
    opacity: 0.9;
  }
`;

// 在多个Styled Component中应用这些公共样式
const PrimaryButton = styled.button`
  ${commonButtonStyles} /* 引入公共样式 */
  background-color: #007bff;
  color: white;
`;

const SecondaryButton = styled.button`
  ${commonButtonStyles} /* 引入公共样式 */
  background-color: #6c757d;
  color: white;
`;

const DangerButton = styled.button`
  ${commonButtonStyles} /* 引入公共样式 */
  background-color: #dc3545;
  color: white;
`;

// 使用示例
const AppButtons = () => (
  <div style={{ display: 'flex', gap: '10px', padding: '20px' }}>
    <PrimaryButton>主要按钮</PrimaryButton>
    <SecondaryButton>次要按钮</SecondaryButton>
    <DangerButton>危险按钮</DangerButton>
  </div>
);

export default AppButtons;

import styled from 'styled-components';

// 定义一个基础按钮组件
const BaseButton = styled.button`
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  &:hover {
    opacity: 0.9;
  }
`;

// 基于BaseButton创建新的组件，并添加独有样式
const PrimaryButton = styled(BaseButton)`
  background-color: #007bff;
  color: white;
`;

const SecondaryButton = styled(BaseButton)`
  background-color: #6c757d;
  color: white;
`;

const OutlineButton = styled(BaseButton)`
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;
`;

// 使用示例
const AppButtonsInherited = () => (
  <div style={{ display: 'flex', gap: '10px', padding: '20px' }}>
    <PrimaryButton>主要按钮</PrimaryButton>
    <SecondaryButton>次要按钮</SecondaryButton>
    <OutlineButton>边框按钮</OutlineButton>
  </div>
);

export default AppButtonsInherited;