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
25 lines
464 B
TypeScript
25 lines
464 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 styled from 'react-emotion';
|
|
|
|
/**
|
|
* A TextParagraph component.
|
|
*/
|
|
const TextParagraph = styled('div')({
|
|
marginBottom: 10,
|
|
|
|
'&:last-child': {
|
|
marginBottom: 0,
|
|
},
|
|
});
|
|
TextParagraph.displayName = 'TextParagraph';
|
|
|
|
export default TextParagraph;
|