styled-components无法传递props问题求助

刚上手styled-components，照着官方文档用${(props) => props.variable}的方式传递值，但完全没效果，反复查文档也没解决。

相关代码 #

Board组件 #

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

App组件 #

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

已尝试的解决方法 #

• 在变量前添加$，无变化；
• 解构props；
• 尝试多种在App文件中传递值的方式；
• 移除变量仅保留函数形式（比如直接写死值），这种方式可行，但用变量时就失效。

补充疑问 #

找到的资料大多是基于类组件的旧内容，官方文档也缺乏新内容，想知道styled-components现在还流行吗？有没有其他替代方案可以实现组件作用域和CSS变量的功能？

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