Блог

Я построил весь пример на 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 ?

Вы уже использовали react devtools?

Реквизит можно увидеть с помощью инструментов разработки React.

См. скриншот ниже