Files
flipper/src/ui/components/SidebarLabel.tsx
Michel Weststrate 0a8222410c Fix React devtools experience
Summary:
Currently most components are shown anonymously in the component tree, because using `styled` creates unnamed components, shown as the HTML elements they result in.

This has two downsides:
1. React errors / warnings are really vague and it is hard to locate where they are coming from
2. The React Devtools don't show which components are rendering.
3. The effect of the latter it is hard to copy-from-example when developing plugins. This leads to a lot of inconsitency and duplication in the layouts of components

Reviewed By: jknoxville

Differential Revision: D18503675

fbshipit-source-id: 5a9ea1765346fb4c6a49e37ffa4d0b4bbcd86587
2019-11-15 02:09:32 -08:00

22 lines
478 B
TypeScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {colors} from './colors';
import Label from './Label';
import styled from 'react-emotion';
const SidebarLabel = styled(Label)({
color: colors.blackAlpha30,
fontSize: 12,
padding: 10,
});
SidebarLabel.displayName = 'SidebarLabel';
export default SidebarLabel;