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
?
Did you use react devtools already?
Props can be seen with React dev tools.
Refer to the screenshot below