Question 375976 in CSS Question posted in
Some basic documentation can be found here.

Css – Can't Get styled-components to Pass any props

So I just began using styled-components and I’m sorry if there is some very basic error I’m making. But I’ve looked over the docs a dozen times now and can’t find any way to get it to work with absolutely anything passed using the ${(props) => props.variable} method shown in the official instructions.

Here’s the React Component I’m using the prop in:

import { styled } from 'styled-components';
import Box from './Box';

const BOARD = styled.div`
  display: grid;
  grid-template-columns: ${(props) => 'repeat(3, 320px)'};
  grid-template-rows: ${(props) => 'repeat(3, 320px)'};
  gap: ${(props) => props.boxSpacing};
  background-color: black;
  padding: ${(props) => '20px'};
`;

export default function Board(props) {

  console.log(props)
  return (
    <BOARD>
      <Box /><Box /><Box /><Box /><Box /><Box /><Box /><Box /><Box />
    </BOARD>
  );
}

And here’s my App component where I pass the prop that isn’t getting through:

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import Board from './components/board/Board.jsx';
import './App.css';


function App() {
  const [count, setCount] = useState(0)
  
  return (
    <>
      <Board boxSpacing={'20px'} />
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

I’ve tried:

  1. Using the $ before variables that shows up a lot in the docs. As far as I know this is just to prevent custom props from conflicting with normal HTML attributes that already exist on elements. But, I wasn’t sure if perhaps styled-components uses this in some other way. It didn’t change anything.

  2. I tried destructuring props just for the hell of it.

  3. I tried every method of passing the value to the component that I could think of in the App file. boxSpacing={} with a variable or just with the value in ”.

  4. I tried removing all variables and still using the function:
    (props) => 'the actual CSS here';
    …to see if everything was installed properly or if I’d missed something in the basic syntax. This
    worked. So it seems that the functions are being evaluated and passing something to normal CSS. It
    only becomes a problem when a variable is involved.

PS Everything I’m finding is REALLY old looking. Class based components and the ‘render()’ function. Even the official docs don’t seem to offer anything more current. I heard that styled components was popular currently. Is this no longer the case? Should I be using something else to allow for component scoping and using variables within my CSS?

Tags:

2

Answers


  1. 0

    The issue seems to be with the import statement of styled-components.

    Use import styled from 'styled-components'; instead.

    Login or Signup to reply.
  2. 0

    You are doing a couple of things wrong:

    1. It’s import styled from 'styled-components'

    2. You are not passing in the props completely. I do not also seeing you passing any prop for the grid template columns and rows so I’d remove the whole prop thing you are doing there. If there meant to be props you can use the example of the boxSpacing and fix that too. Here is the corrected code.

    
import styled from 'styled-components'
import Box from './Box';

const BOARD = styled.div`
   display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: ${(props) => props.boxSpacing};
  background-color: black;
`;

export default function Board(props) {

  console.log(props)
  return (
    <BOARD boxSpacing={props.boxSpacing}>
      <Box /><Box /><Box /><Box /><Box /><Box /><Box /><Box /><Box />
    </BOARD>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search