React中Styled Components的条件样式与复用技巧

import styled from 'styled-components';

// 定义一个Styled Header组件
const Header = styled.div`
  padding: 10px 20px;
  font-size: 18px;
  color: white;
  text-align: center;
  /* 根据isActive prop动态设置背景颜色 */
  background-color: ${props => (props.isActive ? '#007bff' : '#6c757d')};
  border-radius: 5px;
  margin-bottom: 10px;

  /* 也可以根据多个props进行更复杂的判断 */
  border: ${props => (props.hasBorder ? '1px solid #dee2e6' : 'none')};
`;

// 在React组件中使用
function App() {
  const [active, setActive] = React.useState(false);

  return (
    <div>
      <Header isActive={active} hasBorder={true}>
        这是一个动态Header
      </Header>
      <Header isActive={!active}>
        这是另一个Header
      </Header>
      <button onClick={() => setActive(!active)}>
        切换Header状态
      </button>
    </div>
  );
}

export default App;

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

// 1. 定义一个可复用的CSS代码块
const ButtonBaseStyles = css`
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  border: none;

  &:hover {
    opacity: 0.9;
  }
`;

// 2. 为每个组件应用基础样式，并添加各自特有的样式
const PrimaryButton = styled.button`
  ${ButtonBaseStyles} /* 引用共享样式 */
  background-color: #007bff;
  color: white;

  &:active {
    background-color: #0056b3;
  }
`;

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

  &:active {
    background-color: #545b62;
  }
`;

const OutlineButton = styled.button`
  ${ButtonBaseStyles} /* 引用共享样式 */
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;

  &:hover {
    background-color: #e0f0ff;
  }
  &:active {
    background-color: #cce0ff;
  }
`;

// 在React组件中使用
function App() {
  return (
    <div>
      <PrimaryButton>主要按钮</PrimaryButton>
      <SecondaryButton>次要按钮</SecondaryButton>
      <OutlineButton>边框按钮</OutlineButton>
    </div>
  );
}

export default App;