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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 3178 天前的主题，其中的信息可能已经有所发展或是发生改变。

用 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 条回复 2017-08-13 22:49:20 +08:00

crs0910

2017 年 8 月 12 日

className

searene

2017 年 8月 13 日

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

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

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

sodatea

2017 年 8 月 13 日

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

2017 年 8 月 13 日 via iPhone

想用 css 写法可以看 styled jsx

zbinlin

2017 年 8 月 13 日

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

classDivComponentextendsComponent{
render(){
return(
<divclassName="test">Test</div>
);
}
}

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