如何为每个Styled Component应用独立CSS样式？以及如何在Styled Component中处理其他Styled Component？

Hey there! Let's work through your styled-components spacing issue and clarify how to keep each component's styles independent.

Fixing the 10px Margin Between Logo and Links #

The core issue here is that styled-components scopes styles by default, so parent components can't directly target child styled components unless you use one of these approaches:

1. Nest the Child Styled Element in the Parent's Styles

If you export the raw styled element from your child components (not just the wrapper component), you can reference it directly in the parent's styled component:

Logo.jsx

import styled from 'styled-components';

// Export the styled element along with your component
export const StyledLogo = styled.div`
  /* Your Logo styles here */
  font-size: 2rem;
  font-weight: bold;
`;

export const Logo = () => {
  return <StyledLogo>MyApp</StyledLogo>;
};

Header.jsx

import styled from 'styled-components';
import { Logo, StyledLogo } from './Logo';
import { Links } from './Links';

const NH = styled.header`
  display: flex;
  align-items: center;
  padding: 1rem;

  /* Target the StyledLogo directly */
  ${StyledLogo} {
    margin-right: 10px;
  }
`;

export const Header = () => {
  return (
    <NH>
      <Logo />
      <Links />
    </NH>
  );
};

2. Pass a Custom ClassName to the Child Component

Modify your child components to accept a className prop, then use that class in the parent's styles:

Logo.jsx

import styled from 'styled-components';

const StyledLogo = styled.div`
  /* Your Logo styles here */
`;

export const Logo = ({ className }) => {
  // Pass the custom className to the styled element
  return <StyledLogo className={className}>MyApp</StyledLogo>;
};

Header.jsx

import styled from 'styled-components';
import { Logo } from './Logo';
import { Links } from './Links';

const NH = styled.header`
  display: flex;
  align-items: center;
  padding: 1rem;

  .logo-spacer {
    margin-right: 10px;
  }
`;

export const Header = () => {
  return (
    <NH>
      <Logo className="logo-spacer" />
      <Links />
    </NH>
  );
};

3. Pass Spacing via Props

For maximum flexibility, let the parent control spacing by passing props to the child component:

Logo.jsx

import styled from 'styled-components';

const StyledLogo = styled.div`
  margin-right: ${props => props.marginRight || '0'};
  /* Your Logo styles here */
`;

export const Logo = ({ marginRight }) => {
  return <StyledLogo marginRight={marginRight}>MyApp</StyledLogo>;
};

Header.jsx

import styled from 'styled-components';
import { Logo } from './Logo';
import { Links } from './Links';

const NH = styled.header`
  display: flex;
  align-items: center;
  padding: 1rem;
`;

export const Header = () => {
  return (
    <NH>
      <Logo marginRight="10px" />
      <Links />
    </NH>
  );
};

Keeping Each Styled Component's Styles Independent #

Good news—styled-components already handles this by default! Every styled component you create gets a unique, auto-generated class name, so styles from Logo.jsx won't leak into Links.jsx or vice versa.

To enforce independence:

• Write each component's styles in its own file (like you already are with Logo.jsx and Links.jsx).
• Avoid using global styles (unless absolutely necessary) with createGlobalStyle, as those will apply everywhere.
• If you need to reuse styles, create reusable styled utilities (e.g., a Button base component) instead of copying code.

Example of independent styles:
Links.jsx

import styled from 'styled-components';

const StyledLinks = styled.nav`
  display: flex;
  gap: 1.5rem;

  a {
    text-decoration: none;
    color: #666;

    &:hover {
      color: #000;
      border-bottom: 2px solid #000;
    }
  }
`;

export const Links = () => {
  return (
    <StyledLinks>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </StyledLinks>
  );
};

These styles won't affect your Logo component at all—they're scoped exclusively to the StyledLinks element.

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