开发工具中的样式化组件道具

Question

我在codesandbox 上构建了整个示例。

import "./styles.css";
import styled from "styled-components/macro";

const Button = styled.button`
  padding: 0.5em;

  ${(props) => {
    if (props.foo === "bar") {
      return `
        color: red;
      `;
    }
  }}
`;

export default function App() {
  return (
    <div className="App">
      <Button foo="bar">Test</Button>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

这是一个使用 props 的样式组件的简单示例。使用这种逻辑，按钮上的彩色文本应该是红色的 - 确实如此。问题是，在开发工具下，我没有看到任何传递给 Button 组件的道具 - 它看起来像这样：

<button class="App__Button-sc-1owtrmu-0 gpXrvp">Test</button>

我在这里使用styled-component/macro 来获取实际的显示名称（这非常好），但是如果我有很多这样的按钮，我怎么知道（从开发工具）哪个按钮传入了哪些道具？我在开发工具中想象过类似[...] foo="bar" 的东西。

有没有办法在styled-components 中做到这一点？

Answer 1

你已经用过 react devtools 了吗？

可以使用 React 开发工具查看道具。

参考下面的截图