I know that we can extend or add styling to existing components with styled-components like the Link component of react-router-dom. The said feature is indicated here. But, my problem is, how can I combine two or more existing components then add some more styles?

In my case, I have a reusable component for text elements like span, p and a with standard font-size, font-weight, etc. At the same time, I want to use the react-router-dom's Link component. Currently, I have something like this:

import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { TextElement } from '../common';

/*
Can I do something like this?
const MyLink = styled(Link, TextElement)`
    margin: 10px 0;
`;

or this?
const MyLink = styled([Link, TextElement])`
    margin: 10px 0;
`;
*/

const MyPage = props => (
   <>
       <MyLink to="/next-page" />
   </>
);

Any suggestion would be appreciated.

EDIT

My TextElement component is just something like this:

const Element = styled.span`
   font-size: 13px;
   font-weight: 500;
`;

// These styles are sample only. Actual styles depend on a "variant" prop.
// I did not show it here since it doesn't have to do with the question I'm asking.

export default ({ tag }) => (<Element as={tag} />);

I know that we can extend or add styling to existing components with styled-components like the Link component of react-router-dom. The said feature is indicated here. But, my problem is, how can I combine two or more existing components then add some more styles?

In my case, I have a reusable component for text elements like span, p and a with standard font-size, font-weight, etc. At the same time, I want to use the react-router-dom's Link component. Currently, I have something like this:

import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { TextElement } from '../common';

/*
Can I do something like this?
const MyLink = styled(Link, TextElement)`
    margin: 10px 0;
`;

or this?
const MyLink = styled([Link, TextElement])`
    margin: 10px 0;
`;
*/

const MyPage = props => (
   <>
       <MyLink to="/next-page" />
   </>
);

Any suggestion would be appreciated.

EDIT

My TextElement component is just something like this:

const Element = styled.span`
   font-size: 13px;
   font-weight: 500;
`;

// These styles are sample only. Actual styles depend on a "variant" prop.
// I did not show it here since it doesn't have to do with the question I'm asking.

export default ({ tag }) => (<Element as={tag} />);

• javascript
• reactjs
• styled-components

• can you show how your TextElement looks like ? – Code Maniac Commented May 23, 2019 at 1:16
• I edited my question to show TextElement @CodeManiac – sdabrutas Commented May 23, 2019 at 1:34
• You can't mix two components like this mate, what you can do is you can take the common css inside a variable and than use that variable wherever you want that css – Code Maniac Commented May 23, 2019 at 1:41
• Maybe just nest them? MyLink = ({ children, ...props}) => <Link {...props}><TextElement>{children}</TextElement></Link> – pawel Commented May 23, 2019 at 11:42

2 Answers 2

You can use mixin for this using css helper. Let's say you put the code for TextElement in a spaced mixin like:

import { css } from 'styled-components';

const spaced = css`
  margin: 10px 0;
`;

And another mixin for Link

const styledLink = css`
  color: blue;
`;

Then you can define your MyLink as:

import styled from 'styled-components'

const MyLink = styled(Link)`
  ${spaced}
  ${styledLink}
`;

The style component could be the wrapper of your custom component. For example:

Your style component:

export const CustomSpanWrapper = styled.div`
    span {
        ...your-styles
    }
`;

Your other component:

<CustomSpanWrapper>
    <CustomSpan>
</CustomSpanWrapper>