Avoid repeating code in styled-components - reactjs

Question

I'm using the same styles of components below on two different components in ReactJS. I wanted to know if it is possible to use a kind of mixin storing in another file and export them, then just call them on each ReactJS component? This would avoid repetition of code.
// 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

Soluce 1 : You can create a common file like :
Common.js
const Common = `
// style you want.
padding: 5px;
color: red;
`
export default Common
and add it in your styled components like
Components.js
import Common from './common'
const TitleInflow = styled.h1`
${Common};
text-align: center;
margin-top: 70px;
padding-bottom: 50px;
`;
Soluce 2 : You can create a component and extend it :
here a component to extend :
const Component = styled.p`
color: red;
fontSize: 12px;
`
extend style like :
const NewComponent = styled(Component)`
// new style you want.
display: flex;
`
and if you want extend style with an another html tag you can do like it when you will use it :
<NewComponent as="h1"/>