导出样式组件的组件

Question

具有源代码：

            eventDragStop: function (event, jsEvent, ui, view) {
                console.log(event);
            },

以及如何导入组件：

display: flex;
flex-wrap: nowrap;
overflow-x: scroll;

我知道了

const StyledHorizontalRule = styled.hr`
  border: 1px solid;
  color: ${props => props.theme.palette.divider_inverted };
  width: auto;
`;

export const HorizontalRule = () => <StyledHorizontalRule />;

我应该如何正确导出组件，什么是最佳实践？

编辑：import { HorizontalRule } from '../../../ui-elements-layout/components/HorizontalRule/index'; 具有：

[!] Error: Unexpected token (Note that you need plugins to import 
files that are not JavaScript)
../ui-elements-layout/components/HorizontalRule/HorizontalRule.tsx 
(10:36)
8: `;
9: 
10: export const HorizontalRule = () => <StyledHorizontalRule />;
                                    ^