This plugin allows to interpolate Linaria components inside styled-components and Emotion:
import styled from 'styled-components';
import { Title } from './Title.styled'; // Linaria component
const Article = () => { /* … */ };
export default styled(Article)`
& > ${Title} {
color: green;
}
`;Install the plugin first:
npm install --save-dev babel-plugin-linaria-interop
Then add linaria-interop to your babel configuration before styled-components:
{
"plugins": [
["linaria-interop", { "library": "styled-components" }],
"styled-components"
]
}