V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
V2EX  ›  JavaScript

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

  •  
  •   searene · 44 天前 · 487 次点击
    这是一个创建于 44 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用 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
        1
    crs0910   44 天前
    className
        2
    searene   44 天前
    @crs0910 我猜你的意思大概是将 DivComponent 的返回值改成这样:

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

    但是如果 DivComponent 是一个第三方库,我不想修改它的代码,只通过修改 StyledDivComponent 能不能也达到同样的效果?
        3
    sodatea   43 天前
    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.
        4
    blanu   43 天前 via iPhone
    想用 css 写法可以看 styled jsx
        5
    zbinlin   43 天前
    @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;
        }
    `;
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1012 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 52ms · UTC 16:59 · PVG 00:59 · LAX 09:59 · JFK 12:59
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1