私はReactプロジェクトでスタイリッシュなコンポーネントを使用しています。コンポーネントがブラウザに表示されている場合、それらは例えば、ランダムに生成されたクラス名、割り当てられています。このクラス名開発ツールを使用してスタイル付きコンポーネントを簡単に検査する方法は？
<div class="sc-KSdffgy oPwefl">
をそうする方法があり、<div>から来たコンポーネントから私を識別しやすくしません。これは簡単ですか？
p.s.私は、例えば、開発ツールでそれらを認識できるように、現在、私は私のスタイルのコンポーネントにattrsにを追加してい：私たちは私たちのBabel pluginを作成した正確な理由
const Foo = styled.div.attrs({
'data-id': 'foo'
})`
...
`;
だこと、それを使用するときに名前が含まれるクラス名を取得します
私たちはあなただけ<のdiv >または<なスタイルではなく、実際のコンポーネント名が表示されますあなたのリアクトデベロッパーツールに意味あまりにも生成したコンポーネントのdisplayNameを設定しその上で
<div class="Sidebar__Button-KSdffgy oPwefl">
（：あなたのコンポーネントを与えました成分）>。それ
plugins: ["styled-components"]
だこと（例えば、あなたの.babelrcで）：
はnpm install --save-dev babel-plugin-styled-componentsでそれをインストールバベルプラグインを使用して、あなたのバベルの設定に追加するには！あなたがcreate-react-appを使用している場合は、バベルの設定を変更することはできません
注意をデバッグハッピー。私は使用し、イジェクトすることなく構成を変更できるようにreact-app-rewiredをお勧めします。我々はまた、react-app-rewire-styled-componentsを構築しました。これは自動的にスタイル付きコンポーネントBabelプラグインを統合します！