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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3194 days ago, the information mentioned may be changed or developed.

用 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，背景颜色就是默认的白色，有人知道是什么原因么？

5 replies • 2017-08-13 22:49:20 +08:00

catoncat

Aug 12, 2017

className

searene

Aug 13, 2017

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

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

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

sodatea

Aug 13, 2017

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

Aug 13, 2017 via iPhone

想用 css 写法可以看 styled jsx

zbinlin

Aug 13, 2017

@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;
    }
`;