我使用的是样式化组件，代码如下
TopNav.tsx

import {
  Container,
  SearchContainer,
  SearchBox,
  NotificationsContainer,
  NotificationsDetails,
  NotificationsSummary,
  NotificationsCounter,
  NotificationsItems,
  NotificationsHeader,
  NotificationsMarkReadText,
  Notification,
  NotificationTopper,
  NotificationContent,
  NotificationUnread,
  NotificationUnreadDot,
  NotificationsShowAll
} 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;
}

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

      <NotificationsContainer>
        <NotificationsDetails>
          <NotificationsSummary>
            <BellIcon />
            <NotificationsCounter>10</NotificationsCounter>
          </NotificationsSummary>
          <NotificationsItems>
            <NotificationsHeader>
              <NotificationsMarkReadText>
                Mark all as read
              </NotificationsMarkReadText>
              <NotificationsShowAll>
                <Link href="/notifications">Show all</Link>
              </NotificationsShowAll>
            </NotificationsHeader>

            {NOTIFICATIONS.map(({ date, message, url }, index) => {
              return (
                <Notification key={`notify_${index}`}>
                  <NotificationContent>
                    <Link href={url} target="_blank">
                      <NotificationTopper>
                        <strong>{date}</strong>

                        <NotificationUnread>
                          <NotificationUnreadDot />
                        </NotificationUnread>
                      </NotificationTopper>

                      <p>{message}</p>
                    </Link>
                  </NotificationContent>
                </Notification>
              );
            })}
          </NotificationsItems>
        </NotificationsDetails>
      </NotificationsContainer>

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

TopNav.style.ts

import styled from 'styled-components';
import mq from '@/styles/mq';

export const Container = styled.nav`
  border-bottom: var(--border2px) solid var(--gray500);
  background-color: var(--gray100);
  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: calc(100% - 15rem);
    padding: 1.25rem 0.5rem;
  }
`;

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

...

由于我的样式在一个单独的文件中以保持代码的简洁，我如何将fullWidth传递到我的样式文件中呢？这样我就可以动态地设置我的导航的宽度。
我看了看文档，似乎所有的例子都是将所有的代码放在同一个文件中。