React styled-component 不傳遞道具

Question

我做了什么：
我將一些道具傳遞給功能組件Stat.jsx 。

我所期望的：
我需要將一些背景漸變顏色代碼作為string類型道具傳遞給Stat.jsx組件以制作自定義顏色元素。

發生了什么：
道具沒有傳遞給Stat.jsx ，道具 object 也是空的。

Stat.jsx

import React from 'react';
import styled from 'styled-components';

const Stat = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5em;
    width: auto;
    height: 2.5em;
    border-radius: 0.5em;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    background: linear-gradient(160deg, ${(props) => console.log(props) });
    font-size: 1.8em;
    font-family: Rubik-Medium;
    color: #fff;
`;

// console.log(props) is returning object: { children: "1000", theme: {} }

export default ({ value }) => <Stat>{value}</Stat>;

統計.jsx

import React from 'react';
import Stat from './Stat';
import styled from 'styled-components';

const Stats = styled.div`
    display: flex;
`;

export default () => (
    <div>
        <Stats>
            <Stat value="1000" background="#F4D03F, #16A085" />
        </Stats>
    </div>
);

Answer 1

快速解決

因為您沒有將背景道具傳遞給實際的 Stat 組件：

export default (props) => <Stat {...props}>{props.value}</Stat>;

---

解釋

說明問題的更好方法是重命名組件：

import React from 'react';
import styled from 'styled-components';

const StyledStat = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5em;
    width: auto;
    height: 2.5em;
    border-radius: 0.5em;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    background: linear-gradient(160deg, ${(props) => console.log(props) });
    font-size: 1.8em;
    font-family: Rubik-Medium;
    color: #fff;
`;


export default function Stat(props){
    const { value } = props;
    
    return (
       <StyledStat {...props}>
          {value}
       </StyledStat>;

};

Answer 2

樣式化組件道具通常來自 ThemeProvider，這就是為什么您在styled.div中的 console.logging 中看到theme道具的原因

通常在 App.js 中你有這樣的東西：

// src/App.jsx

import React from 'react'
import { ThemeProvider } from 'styled-components';

const theme: {
   colors: {
     primary: blue,
   }
}

const App = () => (
  <ThemeProvider theme={theme}>
    <Stat />
  </ThemeProvider>
)

export default App;

您可以使用${(props) => props.theme.colors.primary }訪問這些屬性，因為 styled-components 為每個 StyledComponents 提供了它的theme道具（后面有一個 Context Provider/consumer 東西）

import React from 'react';
import styled from 'styled-components';

const Stat = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5em;
    width: auto;
    height: 2.5em;
    border-radius: 0.5em;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    background: linear-gradient(160deg, ${(props) => props.theme.colors.primary} });
    font-size: 1.8em;
    font-family: Rubik-Medium;
    color: #fff;
`;