Question

我刚刚开始研究针对JavaScript React Web应用程序使用样式化组件，而我想知道是否可以使用基于类的样式化组件。例如：

功能（有效）：

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

这样可能吗？

Answer 1

是的，可以做到的，您只需要将className属性传递给您希望拥有样式组件类的JSX元素，并且实际上您可以传递任何其他属性，因为样式组件将所有属性向下传递到其包装的组件。

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!!'/>

您可以在他们的docs中看到此模式的示例。希望对您有帮助！

我可以创建基于类的React样式组件吗？

1 个答案: