CODEWITHSUNDEEP
javascriptreactjsstyled-componentsreact-functional-component
iosrat
iosrat

Reputation: 50

React styled-component don't pass props

What I did:
I'm passing some props to functional component Stat.jsx.

What I expected:
I need to pass some background gradient color codes as a string type prop to the Stat.jsx component to make custom color elements.

What happened:
Props aren't passing to the Stat.jsx, also props object is empty.

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



Stats.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>
);

Upvotes: 0

Views: 912

Answers (2)

Manu
Manu

Reputation: 396

Styled components props comes from the ThemeProvider usually, this is why you see a theme props while console.logging inside your styled.div

Usually in App.js you have something like that:

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

you can access these attributes with ${(props) => props.theme.colors.primary } because styled-components provides its theme props to every StyledComponents (there is a Context Provider/consumer thing behind)

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

Upvotes: 0

dmraptis
dmraptis

Reputation: 929

Quick Fix

Because you don't pass the background prop to the actual Stat component:

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

Explanation

A better way to illustrate the issue is by renaming your components:

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

};

Upvotes: 2

Related Questions