У меня есть следующий компонент:

const StyledH3 = styled.h3`
  direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);

export default H3;

И я хочу расширить его стили, например, в другом файле:

import { H3 } from 'components';

const Title = styled(H3)`
  background-color: red;
`;

Как мне этого добиться?

6
Asaf David 25 Фев 2018 в 18:44

4 ответа

Лучший ответ

Вам нужно выставить реквизит className в экспортированном компоненте, чтобы он мог получить новое className:

const StyledH3 = styled.h3`
    direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children, className }) => ( // Note - className prop.
    <StyledH3 
        className={className} // Need to add this here 
        isRTL={isChildrenRTL(children)}
    >
        {children}
    </StyledH3>
);
export default H3;

Затем вы можете расширить стили вашего компонента в другом файле, как вы предложили:

import H3 from 'components';

const Title = styled(H3)`
    background-color: red;
`;

Ссылочная ссылка https://www.styled-components.com/docs/basics # стайлинг - любая -компонента

7
Cubed Eye 8 Апр 2018 в 12:30

Использование styled-components v4 "как":

H3.js

const StyledH3 = styled.h3`
  color:red;
`;

export const H3 = ({ children }) => (
  <StyledH3>{children}</StyledH3>
);

Card.js

import { H3 } from 'components';

const Title = styled.div`
   border-bottom: 1px solid red;
`;

export const Card = (props) => (
  <div>
     <Title as={H3} />   <----- using "as" --------
     <p>...</p>
  </div>
);
0
vsync 31 Окт 2018 в 20:29

Согласно styled-component документации вы должны сделать это следующим образом.

export const StyledH3 = styled.h3`
 direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;
const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);
export default H3;

А затем в другом файле, где вам это нужно, сделать что-то вроде этого.

import H3, { StyledH3  } from 'components';

const Title = StyledH3 .extend`
  background-color: red;
`;

Для справки взгляните на Расширение стилей в styleled-компонентах

Обратите внимание, что вы можете расширять только стиль стилевого компонента, но не класс неактивных компонентов React для styled-component.

0
Adeel Imran 25 Фев 2018 в 16:54