无法获取样式组件来传递任何道具

Question

所以我刚刚开始使用样式组件，如果我犯了一些非常基本的错误，我很抱歉。但我现在已经查看了文档十几次，找不到任何方法让它与使用官方说明中显示的

${(props) => props.variable}

方法传递的任何内容一起工作。

这是我在其中使用 prop 的 React 组件：

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

这是我的应用程序组件，我在其中传递了未通过的道具：

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

我已经尝试过：

1. 在文档中经常出现的变量前使用 $ 。据我所知，这只是为了防止自定义 props 与元素上已经存在的普通 HTML 属性发生冲突。但是，我不确定样式组件是否以其他方式使用它。它没有改变任何东西。

2. 我尝试解构道具只是为了好玩。

3. 我尝试了在 App 文件中我能想到的将值传递给组件的所有方法。

   boxSpacing={}

   带有变量或仅带有 '' 中的值。

4. 我尝试删除所有变量并仍然使用该函数：

   (props) => 'the actual CSS here';

   ...查看所有内容是否安装正确，或者我是否遗漏了基本语法中的某些内容。这 工作了。所以看起来这些函数正在被评估并将一些东西传递给普通的CSS。它 只有当涉及变量时才成为问题。

PS 我发现的所有东西看起来都很旧。基于类的组件和“render()”函数。即使官方文档似乎也没有提供任何更新的内容。听说现在流行样式组件。现在不再是这样了吗？我应该使用其他东西来允许组件作用域并在 CSS 中使用变量吗？

Answer 1

问题似乎出在 styled-components 的 import 语句上。

请使用

import styled from 'styled-components';

来代替。