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

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

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

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

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

在styled-components中有没有这样做的方法？

Answer 1

你已经使用react devtools了吗？

道具可以在React开发工具中看到。

参考下面的屏幕截图

​

​