如何从组件向独立的Styled Components样式文件传递props？

步骤1：在样式文件中处理props并修复语法错误 #

在TopNav.style.ts中，先为样式组件定义props类型（TypeScript环境下推荐，避免类型报错），同时修正三元表达式的语法问题：

// TopNav.style.ts
import styled from 'styled-components';
import mq from '@/styles/mq';

// 定义Container组件接收的props类型
interface ContainerProps {
  fullWidth: boolean;
}

export const Container = styled.nav<ContainerProps>`
  border-bottom: var(--border2px) solid var(--gray500);
  background-color: var(--gray100);
  // 修正三元表达式语法，根据fullWidth动态设置宽度
  width: ${(props) => props.fullWidth ? '100%' : 'calc(100% - 5rem)'};
  padding: 1.06rem 0.5rem;
  align-items: center;
  position: fixed;
  display: flex;
  z-index: 999;
  gap: 2rem;
  right: 0;
  top: 0;

  @media screen and ${mq.minMedium} {
    // 按需为移动端也添加动态宽度逻辑
    width: ${(props) => props.fullWidth ? '100%' : 'calc(100% - 15rem)'};
    padding: 1.25rem 0.5rem;
  }
`;

export const SearchContainer = styled.div`
  flex: 12;
`;

// 其他样式组件保持不变
...

步骤2：在组件中给Container传递属性 #

在TopNav.tsx里，直接把组件接收的fullWidth属性传递给Container组件即可：

// TopNav.tsx
import {
  Container,
  SearchContainer,
  SearchBox,
  // 其他样式组件导入
} from '@/components/Layout/TopNav.style';
import Link from 'next/link';
import { MagnifyingGlassIcon, BellIcon } from '@heroicons/react/24/outline';
import { NOTIFICATIONS } from '@/constants/Notifications';
import { ThemeSwitch } from '@/components/ThemeSwitch/ThemeSwitch';

interface TopNavProps {
  fullWidth: boolean; // 用TypeScript原始类型boolean，而非对象类型Boolean
}

export const TopNav = ({ fullWidth }: TopNavProps) => {
  return (
    // 直接传递fullWidth属性给Container
    <Container fullWidth={fullWidth}>
      <SearchContainer>
        <SearchBox>
          <form>
            <button type="submit">
              <MagnifyingGlassIcon />
            </button>
            <input type="text" placeholder="The everything search..." />
          </form>
        </SearchBox>
      </SearchContainer>

      {/* 通知栏、主题切换等组件内容保持不变 */}
      <NotificationsContainer>
        ...
      </NotificationsContainer>

      <ThemeSwitch />
    </Container>
  );
};

核心说明 #

• styled-components跨文件传递props的逻辑和同文件完全一致，本质就是把样式组件当作普通React组件传参
• TypeScript环境下添加泛型类型（styled.nav<ContainerProps>）可以获得完整的类型提示，避免传参错误
• 注意模板字符串中三元表达式的语法，必须把完整判断逻辑包裹在${}内

内容的提问来源于stack exchange，提问作者Ben Bagley