小编thi*_*ght的帖子

我正在研究样式组件，在“根据道具进行调整”部分中遇到了一些问题。

import './App.css';
import styled from 'styled-components'

const PrimaryButton = styled.button`
  color: ${props=>props.primary?"white":"black"};
  background-color: ${props=>props.primary?"blue":"gray"};
`;

function App() {
  return (
    <div>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  );
}

export default App;

起初，我尝试使用这段代码，控制台告诉我使用primary=true，所以我就这么做了。

但控制台中出现以下错误，显示“看起来未知的 prop“primary”正在发送到 DOM”。为了解决这个问题，我简单浏览了一下styled-components文档。我发现他们使用$primary而不是primary. 所以最终的代码如下所示：

import './App.css';
import styled from 'styled-components'

const PrimaryButton = styled.button`
  color: ${props=>props.$primary?"white":"black"};
  background-color: ${props=>props.$primary?"blue":"gray"};
`;

function App() {
  return (
    <div>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton $primary>Primary</PrimaryButton>
    </div>
  );
}

export default App;

我再也看不到错误了，但我仍然不知道它发生的原因并已解决。

这是什么$意思？