Question

我使用https://github.com/facebookincubator/create-react-app创建了一个简单的React应用。

我正在尝试为组件的CSS指定一个可配置的URL，如下所示：

.Cell {
    background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png);
}

以下是组件：

import React from 'react';
import './Cell.css'

class Cell extends React.Component {
    render() {
        return (
            <div className="Cell">
                {this.props.name}
            </div>
        );
    }
}

但它看起来并不像流程变量那样流入导入的CSS。我该怎么做呢？

Answer 1

如果你想在CSS中使用js变量，请尝试使用React inline-style而不是plain css文件。

https://facebook.github.io/react/tips/inline-styles.html

如果要分离CSS和JS，可能需要CSS预处理器来管理全局变量。

Answer 2

我遇到了一个这样的场景，我使用的方法不是在CSS中将其添加为背景，而是创建一个img元素，然后在组件本身中将路径指定为src。我认为没有其他方法可以做到这一点。

如何在ReactJS导入的CSS中使用环境变量？

2 个答案: