如何在我的反应应用程序中使用样式化组件？

Question

I had trouble naming this question and it seems quite broad, so, forgive me oh moderators. I'm trying out styled components for the first time and trying to integrate it into my react app. I have the following so far:

import React from 'react';
import styled from 'styled-components';

const Heading = styled.h1`
    background: red;
`;

class Heading extends React.Component {

    render () {

        return (
            <Heading>
                {this.props.title}
            </Heading>
        );
    }

}

export default Heading;

So, just a normal class, but then I import styled components up top, define the const Heading , where I specify that a Heading really is just a styled h1 . But I get an error stating that Heading is a duplicate declaration since I also say class Heading... .

I'm obviously completely missing something here. All the examples online doesn't actually show how you also use this with React. Ie where do I define my class, my constructor, set my state, etc.

Do I have to move the styled component into it's own file, ie:

import styled from 'styled-components';

const Heading = styled.h1`
    background: red;
`;

export default Heading;

Then create a React component that will serve as a wrapper of sorts, eg 'HeadingWrapper':

import React from 'react';
import Heading from './Heading';

class HeadingWrapper extends React.Component {

    render () {

        return (
            <Heading>
                {this.props.title}
            </Heading>
        );
    }

}

export default HeadingWrapper;

A bit of clarity on this would greatly be appreciated! Thanks :)

Answer 1

styled.h1`...` (for example) returns a React component that works just like <h1> . In other words, you use <h1> like this:

<h1>h1's children</h1>

...so when you do const Heading = styled.h1`...`; , you'll use <Heading> the same way:

<Heading>Heading's children</Heading>

If you want a component that behaves differently, eg one that uses the title prop instead of children , you'll need to define such a component, and it will need to have a different name than the Heading component you already defined.

For example:

 const styled = window.styled.default; const Heading = styled.h1` background: red; `; const TitleHeading = ({title}) => <Heading>{title}</Heading>; // ...or... class StatefulTitleHeading extends React.Component { render() { return <Heading>{this.props.title}</Heading>; } } ReactDOM.render( <div> <Heading>I'm Heading</Heading> <TitleHeading title="I'm TitleHeading"/> <StatefulTitleHeading title="I'm StatefulTitleHeading"/> </div>, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://unpkg.com/styled-components@1.4.3/dist/styled-components.js"></script> <div id="container"></div> 

Frankly, though, it makes more sense to just use the component returend by styled.h1 directly:

const Heading = styled.h1`...`;
export default Heading;

// ...then...

<Heading>Children go here</Heading>

The semantics of children are already clear, and using <Heading title="Children go here"/> instead detracts significantly from that.

Answer 2

Let me make this really simple for you.

Let's create one styled component for heading named 'Heading'

const Heading = styled.h1`
  color: 'black';
  font-size: 2rem;
`

and now you can use it like following.

<Heading>{this.props.title}</Heading>

How you manage to get the title prop as it's child is no concern of style component's. It only manages how that title looks. Styled component is not a container that maintains your app/business logic.

Now let's look at an example in it's entirety.

import styled from 'styled-components'

// Heading.js (Your styled component)

const Heading = styled.h1`
  color: 'black';
  font-size: 2rem;
`
export default Heading

and now your container that will use your styled component

// Header.jsx (Your container)
class Header extends Component {

  componentWillReceiveProps(nextProps) {
    // This your title that you receive as props
    console.log(nextProps.title)
  }

  render() {
    const { title } = this.props
    return (
      <div id="wrapper">
        <Heading>{title}</Heading>
      </div>
    )
  }
}

I hope that helps. Let me know if you need further clarification.