javascript - Bir bileşenden stile sahip styled components dosyasına props nasıl aktarılır?

Styled bileşenler kullanıyorum ve aşağıdaki koda sahibim

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;
`;

...

Stillerim kodu temiz tutmak için ayrı bir dosyada olduğundan, fullWidth değerini stil dosyama nasıl geçirebilirim? Böylece navigasyonumun genişliğini dinamik olarak ayarlayabilirim.

Belgeleri inceledim ve tüm örneklerin tüm kodun aynı dosyada olduğu görünüyor.

Cevap #1

FullWidth değerini stil dosyama nasıl geçiririm? Böylece navigasyonumun genişliğini dinamik olarak ayarlayabilirim.

Eğer seni doğru anladıysam, fullWidth'i Container bileşenine geçirmen gerekiyor.

<Container fullWidth={fullWidth}>

Ancak stil dosyanızda da bir sözdizimi hatası var, çünkü

width: ${(props) => props.fullWidth}? '100%' : calc(100% - 5rem);

açıkça başarısız olacak, çünkü üçlü operatör dize sabiti dışında. Sadece bunu şuna değiştir:

width: ${({ fullWidth }: { fullWidth: boolean }) => fullWidth ? '100%' : 'calc(100% - 5rem)'};

Cevap #2

Oluşturduğunuz stillendirilmiş bileşen, altında bir React bileşeni olduğu için, prop göndermek tıpkı React bileşenlerine prop göndermek gibidir.

İşte gösterim:

<Container fullWidth={yourValue} />