如何在反應樣式組件中設置子組件的樣式？

Question

我似乎無法將內部子組件Product為向左浮動。 我想在上層父級執行此操作，因此產品本身仍然與位置無關。

import React from 'react';
import Product from './product.js';
import styled from 'styled-components';

const ProductContainer = styled.div`
 ${Product} {
  float: left;
 }
`


class ClassProductContainer extends React.Component {
    render() {
        return (
            <ProductContainer>
                <Product label="Item 1 £10" />
                <Product label="Item 1 £10" />
                <Product label="Item 1 £10" />
                <Product label="Item 1 £10" />
            </ProductContainer>
            )
        }
    }

export default ClassProductContainer;

我在 app.js 中像這樣使用它

import Container from './components/container.js';
import styled from 'styled-components';
import ClassProductContainer from './components/product-container.js';

function App() {
  return (
    <Container>
        <ClassProductContainer />
    </Container>
  );
}

export default App;

Answer 1

想想看， Product組件仍然是由不同的 HTML 元素組成的吧？ 所以當你這樣做時：

 ${Product} {
  float: left;
 }

您究竟要設置哪個 HTML 元素float: left ？

---

你可以處理這個問題的一種方法是，在Product組件中，找到你想要設置樣式的確切 HTML 元素，給它一個 className，然后你可以用.whatever-class-name-you-set替換${Product} 。

但我認為由於樣式需要應用於<Product> ，您應該在 Product 級別創建樣式組件。