Styled-components props in dev tools

Question

I've built the whole example on 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>
  );
}

This is a simple example of a styled-component using props. With this logic, the color text on the button should be red - and it is. The problem is, under Dev Tools, I don't see any props passed to the Button component - it looks like this:

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

I used styled-component/macro here to get the actual display name (which is very good), but then if I would have many buttons like that, how would I know (from dev tools) which button has which props passed in? I imagined something like [...] foo="bar" in dev tools.

Is there a way to do it in styled-components ?

Answer 1

Did you use react devtools already?

Props can be seen with React dev tools.

Refer to the screenshot below