React Styled Components中Props与三元表达式控制CSS的问题求助

Got it, let's break down exactly what's going wrong with your code and get it working just like the native React conditional you referenced. There are two key issues to fix:

1. Component Declaration Order (Critical!) #

In React, you have to define a component before you use it. Right now, you're trying to render <Container /> before you've declared const Container = styled.div — that's definitely throwing a "Container is not defined" error in your console.

Fix this by reordering your code:

// First define the styled component
const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  border: ${props => props.data === "blueborder" ? "solid blue" : "solid red"};
`;

// Then use it in your JSX
<Container></Container>

2. Passing the Required data Prop #

Your styled component is set up to check for a data prop, but you're not passing it in! Right now, props.data is undefined, so it will always default to the red border. To make the conditional work, you need to pass the data prop when rendering the component:

// Render with blue border
<Container data="blueborder"></Container>

// Render with red border
<Container data="redborder"></Container>

// Or omit the prop entirely (falls back to red)
<Container></Container>

Full Working Example #

Here's the complete, functional code that matches the behavior you wanted from your native React example:

import styled from 'styled-components';

// Define the styled component first
const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  border: ${props => props.data === "blueborder" ? "solid blue" : "solid red"};
  /* Add padding to make the border visible */
  padding: 1.5rem;
`;

// Use it in a parent component
function MyComponent() {
  // You can even set the prop dynamically
  const borderVariant = "blueborder"; // Swap to "redborder" to test the toggle

  return (
    <Container data={borderVariant}>
      Hello, styled-components!
    </Container>
  );
}

export default MyComponent;

Quick Pro Tips for styled-components Props #

• You can name props anything (no need for data — use something descriptive like borderType if you want).
• For more complex logic, extract the prop handling into a separate function for readability:

  const getBorderStyle = (props) => {
    return props.borderType === "blue" ? "solid blue 2px" : "solid red 2px";
  };
  
  const Container = styled.div`
    border: ${getBorderStyle};
    /* Other styles */
  `;
  

That should get your code running smoothly and your conditional border working exactly as expected!

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