Комбинируйте несколько стилизованных элементов со стилями-компонентами

Я знаю, что мы можем расширить или добавить стили к существующим компонентам с помощью стилизованных компонентов, таких как компонент Link из react-router-dom. Указанная функция указана здесь. Но моя проблема в том, как я могу объединить два или более существующих компонента, а затем добавить еще несколько стилей?

В моем случае у меня есть многоразовый компонент для текстовых элементов, таких как span, p и a со стандартным размером шрифта, шрифтом и т. Д. В то же время я хочу использовать компонент Link для react-router-dom. В настоящее время у меня есть что-то вроде этого:

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" />
   </>
);

Любое предложение будет оценено.

РЕДАКТИРОВАТЬ

Мой компонент TextElement выглядит примерно так:

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} />);

reactjs javascript styled-components
person sdabrutas    schedule 23.05.2019    source источник
comment
вы можете показать, как выглядит ваш TextElement?   -  person Code Maniac    schedule 23.05.2019
comment
Я отредактировал свой вопрос, чтобы показать TextElement @CodeManiac   -  person sdabrutas    schedule 23.05.2019
comment
Вы не можете смешивать два компонента, такие как этот помощник, вы можете взять общий css внутри переменной и затем использовать эту переменную везде, где вы хотите, чтобы этот css   -  person Code Maniac    schedule 23.05.2019
comment
Может, их просто загнездить? MyLink = ({ children, ...props}) => <Link {...props}><TextElement>{children}</TextElement></Link>   -  person pawel    schedule 23.05.2019

Ответы (2)


arrow_upward
6
arrow_downward

Для этого вы можете использовать миксин с помощью css helper. Допустим, вы поместили код для TextElement в миксин spaced, например:

import { css } from 'styled-components';

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

И еще один миксин для Link

const styledLink = css`
  color: blue;
`;

Затем вы можете определить свой MyLink как:

import styled from 'styled-components'

const MyLink = styled(Link)`
  ${spaced}
  ${styledLink}
`;
person Vishnu    schedule 11.02.2021

arrow_upward
-1
arrow_downward

Компонент стиля может быть оболочкой вашего пользовательского компонента. Например:

Your style component:

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

Your other component:

<CustomSpanWrapper>
    <CustomSpan>
</CustomSpanWrapper>
person Nico Diz    schedule 25.05.2019