将CSS渲染为仅HTML服务器端呈现的React组件的头部

问题描述 投票:0回答:1

我正在使用Express进行Server Side React。有没有办法将css文件导入每个组件,然后只将渲染组件的CSS渲染到HTML文档的<head>

例:

// component 1
const React = require('react')
const styles = require('./h1.css')

class H1 extends React.Component {
  render() {
    return (
      <h1>Heading</h1>
    )
  }
}

module.exports = H1

...

// component 2
const React = require('react')
const styles = require('./h2.css')

class H2 extends React.Component {
  render() {
    return (
      <h2>Subheading</h2>
    )
  }
}

module.exports = H2

使用CSS从渲染的组件中呈现HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1 {
        color: #333;
      }
      h2 {
        color: #000;
      }
    </style>
  </head>
css reactjs express
1个回答
0
投票

嗨,我认为你需要的是使用webpack和CSS模块。请看看这个tutorial

© www.soinside.com 2019 - 2024. All rights reserved.