Стилизация компонентов в React

Стилизация Text
src\components\ui\Text\

зачем нужен index.js

Text и TextCenter два разных компонента, но разница в том что один другого будет наследовать

src\components\ui\Text\Text.js

import styled from 'styled-components'

const Text = styled.div`
font-size: 16px;
margin: 10px;
`
export default Text;

src\components\ui\Text\TextCenter.js
компонент TextCenter наследует все свойства от компонента Text

import styled from 'styled-components'
import Text from './index';

const TextCenter = styled(Text)`
text-align: center
`
export default TextCenter;

src\components\ui\Text\index.js
export {TextCenter} компонент принимается как не по умолчанию

import Text from './Text'
import TextCenter from './TextCenter';

export default Text, 
export {  
  TextCenter
}