Могу ли я создавать стилизованные компоненты React на основе классов?

Я только начал изучать использование стилизованных компонентов для веб-приложения JavaScript React, и мне интересно, возможно ли использовать стилизованные компоненты на основе классов. Например:

Функционал (работает):

import styled from 'styled-components';

const Header = styled.header`
    color: blue;
`;

export default Header;

.
.
.

(in another file)
import React, {Component} from 'react';
import Header from './Header';

class App extends Component {
  render() {
    return (
        <Header>
          This is my header.
        </Header>
    );
  }
}

На основе классов (мне было бы интересно, если бы можно было сделать что-то подобное - не работает... цвет не применяется к моему заголовку):

import React, {Component} from 'react';
import styled from 'styled-components';

class Header extends Component {
    render() {
        return (
            <header>
                Hi there. Test.
            </header>
    )};
}

export default styled(Header)`
  color: blue;
`;

.
.
.

(in another file)
import React, {Component} from 'react';
import Header from './Header';

class App extends Component {
  render() {
    return (
        </Header>
    );
  }
}

Возможно ли что-то подобное?


reactjs styled-components
person MuffinTheMan    schedule 26.12.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Да, это можно сделать, вам просто нужно передать свойство className элементу JSX, для которого вы хотите иметь класс styled-component, и на самом деле вы можете передать любые другие свойства, поскольку styled-components передают все свойства до своего обернутого составная часть.

import React, {Component} from 'react';
import styled from 'styled-components';

    class Header extends Component {
        render() {
            return (
                <header className={this.props.className}>
                    Hi there here is another prop {this.props.anotherProp}
                </header>
        )};
    }

    export const StyledHeader styled(Header)`
      color: blue;
    `;

   // you can pass other props down to Header
   <StyledHeader
     anotherProp='testing!!'/>

вы можете увидеть примеры этого шаблона в их документах. Надеюсь, поможет!

person Eric Van Der Dijs    schedule 26.12.2018
comment
Удивительно! Благодарю вас! Я прочитал ту часть документов, на которую вы ссылались, но меня отбросило, так как она написана в функциональной форме (я все еще немного новичок в React). Будет ли применима эта часть документации (второй пример... один с const StyledA = styled(A)``)? Тем не менее, я проверил это, и, похоже, он работает так, как я надеялся :) - person MuffinTheMan; 26.12.2018
comment
Да, вы можете видеть, что они используют компоненты класса, передавая свойство className. С другой стороны, я не использовал интерполяцию компонентов (конечно, буду), но, похоже, она работает, если вы ориентируетесь на стилизованный компонент, а не на компонент React. - person Eric Van Der Dijs; 26.12.2018