Избегайте повторения кода в styled-компонентах

Question

Я использую одинаковые стили компонентов ниже для двух разных компонентов в ReactJS.Я хотел знать, возможно ли использовать что-то вроде миксина в другом файле и экспортировать их, а затем просто вызывать их для каждого компонента ReactJS?Это позволит избежать повторения кода.

// Repeated styles

const TitleInflow = styled.h1`
  text-align: center;
  margin-top: 70px;
  padding-bottom: 50px;
`;

const Table = styled.table`
  margin: 0 auto;
  margin-top: 100px;
`;

const ThTable = styled.th`
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
`;

Answer 1

Решение 1: Вы можете создать общий файл, например:

Common.js

const Common = `
 // style you want.
 padding: 5px; 
 color: red;
`
export default Common

и добавить его в свои стилизованные компоненты, такие как

Components.js

import Common from './common'

const TitleInflow = styled.h1`
  ${Common};
  text-align: center;
  margin-top: 70px;
  padding-bottom: 50px;
`;

Решение 2: Вы можете создать компонент и расширить его:

здесь компонент для расширения:

const Component = styled.p`
   color: red; 
   fontSize: 12px;
`

расширение стиля, например:

const NewComponent = styled(Component)`
    // new style you want.
    display: flex;
`

, и если вы хотите расширить стиль с помощью другого html-тега, вы можете сделать то же самое, когда будете его использовать:

 <NewComponent as="h1"/>