styled-components 不起作用，不知道是为什么

[searene]

用 create-react-app 创建了一个工程，然后把 App.js 改成了如下代码：

import React, { Component } from 'react';
import styled from 'styled-components';
import logo from './logo.svg';
import './App.css';

class DivComponent extends Component {
  render() {
    return (
      <div>Test</div>
    )
  }
}

const StyledDivComponent = styled(DivComponent)`
  background-color: green;
`

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

export default App;

本以为背景颜色会变成绿色，然而并没有，整个页面只显示了一个 Test，背景颜色就是默认的白色，有人知道是什么原因么？

[crs0910]

className

[searene]

@crs0910 我猜你的意思大概是将 DivComponent 的返回值改成这样：

<div className={this.props.className}>Test</div>

但是如果 DivComponent 是一个第三方库，我不想修改它的代码，只通过修改 StyledDivComponent 能不能也达到同样的效果？

[sodatea]

NOTE
styled-components always generates a real stylesheet with classes.
The classnames are then passed to the React component (including third party components) via the className prop.

[blanu]

想用 css 写法可以看 styled jsx

[zbinlin]

@searene 如果知道这些组件的 class，可以使用这种方式 wrap 一下：

class DivComponent extends Component {
    render() {
        return (
            <div className="test">Test</div>
        );
    }
}

const StyledDivComponent = styled(props => <div className={props.className}><DivComponent {...props} /></div>)`
    background-color: green;
    & > .test {
        color: red;
    }
`;