在 React 和 JSX 中使用标准样式 css

Question

我在下面有 css。

在myCss.css

.playlist { margin: 200 200; }
.playlist .channel { background: grey; }

在 JSX 中

import "./myCss.css"
.
.

render (){
  return (
    <div className="playlist" id="playlist">
    </div>
  )
}

它不起作用。 好吧，也许我需要一些特殊的方式来 JSX。

我搜索了一下，发现了一些类似styled component方法。

但是我想使用普通的 css 方式，因为像.playlist.channnel这样的一些参数是由<div className="playlist" id="playlist">中的库生成的。

所以我不能改变。

我想在 React 和 JSX 中坚持使用普通的 css。

不可能？？？

Answer 1

您的捆绑程序可能没有加载 css 文件。 如果您使用的是 Webpack，请查看css-loader - https://webpack.js.org/loaders/css-loader/

除此之外， styled-components非常好，您可以将它与“标准”css 一起使用。 您可以使用createGlobalStyle - https://styled-components.com/docs/api#createglobalstyle定义您的“标准” css 并为其他所有内容使用styled化的 Z8A5DA52ED126447D359E70C05721A8A。

Answer 2

也许有问题

.playlist { margin: 200 200; }

首先，您需要指定px 。 它成为了：

.playlist { margin: 200px 200px; }

其次，您删除第二个200 。 既然没有意义。

.playlist { margin: 200px; }