如何将CSS和样式应用于React组件

Question

我一直在寻找，但是，我很幸运找不到任何方式来设置我创建的React.js文件，我将其从标准网页转换，所以我有原始的CSS，但是，我做的不知道如何使用React以适当的样式显示页面。

任何帮助将不胜感激！

var NavBar = React.createClass({
  render: function() {
    return (
      /* NavBar */
      <div className="dark_bg_color">
        <img src="logo.png" />
        <div className="table_center">
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div className="right_nav">
          <div className="table_center">
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div className="vertical-line">&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<NavBar />, document.getElementById('nav'));

var Gallery = React.createClass({
  render: function() {
    return (
      /* Gallery */
      <div >
        <div align="middle">
          <div id="head">
            <img id="pic" align="middle" max-width="100%" src="title_pic.png" />
            <div align="left" className="big">
              <div>
                <span>Dine with the Best</span>
                <div className="words">
                  <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Gallery />, document.getElementById("Gallery"));

var WhatsNew = React.createClass({
  render: function() {
    return (
      <div  className="dark_bg_color">
        <h2 style={{marginBottom: 30}}>
          <span>What's New</span>
        </h2>
        <div className="autoplay">
          <img src="whatsnew0.png" />
          <img src="whatsnew1.png" />
          <img src="whatsnew0.png" />
        </div>
      </div>
    );
  }
});
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew"));

var BonEvents = React.createClass({
  render: function() {
    return (
      /* Events */
      <div id="events" className="dark_bg_color">
        <div className="box">
          <div className="box-text">
            <div className="horizontal-line" />
            <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div>
            <div className="horizontal-line" />
          </div>
        </div>
        <h2>
          <span>Bon Events</span>
        </h2>
        <div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<BonEvents />, document.getElementById("events"));

var IOS = React.createClass({
  render: function() {
    /* IOS */
    return (
      <div >
        <h2>
          <span />
        </h2>
      </div>
    );
  }
});
ReactDOM.render(<IOS />, document.getElementById("advertiseApp"));

var Footer = React.createClass({
  render: function() {
    return (
      /* Footer */
      <div>
        <div className="footer_center">
          <div>
            <ul>
              <li>ABOUT</li>
              <li>PRESS</li>
              <li>CONTACT</li>
              <li>SUPPORT</li>
              <li>BONAPP FOR RESTAURANTEURS</li>
            </ul>
          </div>
        </div>
        <div className="legal_center">
          <div>
            <ul>
              <li>Copyright © 2016 BonApp Dining Inc.</li>
              <li>Privacy Policy</li>
              <li>Legal</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Footer />, document.getElementById("footer"));

Answer 1

首次阅读您的问题后，您的现有CSS似乎无法正常运行，而且反应时间过长。你的网页。

应该。

如果不是，还有其他事情需要进一步诊断才能修复。我最近在React中重写了我的一个项目，并继续使用完全相同的CSS文件，并且工作得很好。

但是，如果你要问最好的方式来解决这个问题......

正如其他人所说，React prefers inline styles。

然而，我不。它很乱，很难改变，很容易变得笨拙。

SCSS或LESS是在React中设置样式的最佳方式。

但为什么呢？原因如下：

您的CSS可重复使用

如果你使用React方式内联样式，那么对于几个组件来说它可以很好。

但是当这些组件开始堆叠时，您会开始意识到您一次又一次地使用相同的样式。哪个很糟糕。

易于改变

当组件需要更新样式时，您不再需要深入查看React代码以找到正确的组件（或者它是父组件？）并修复它。

相反，只需像您一样使用CSS。

你不必担心覆盖

在CSS的级联部分，内联样式是最后一站。他们会覆盖一切。

起初，它听起来像是您正在实施的样式的一个很好的解决方案，并且在小册子网站上，也许会没事的。但是，当您开始使用更大的应用程序时，会遇到几乎无法排除故障的问题。

不要与CSS的级联部分作斗争，而是使用它并将你的风格保存在同一个地方。

您使用SCSS＆amp;少见

对我而言，最重要的一点是，如果您在React工作并且您更喜欢内联样式，那么它们可以很好地工作。

但是当你转移到任何其他框架时会发生什么？突然之间，这些内联风格的效果不是很好，而且你又回到了正常的写作状态＆＃39;与我们其他人的CSS。那么为什么只为一个框架改变一下呢？

我理解你是否全职工作在React中并且尝试新的最佳实践是有意义的，但是对于我们大多数人来说，当你只能使用它时重新发明轮子是没有意义的。在一个型号的汽车上轮。

Answer 2

如果要保持分区，可以为要构造的特定组件创建.scss文件，然后将其导入组件文件中。

示例：

文件夹结构：

components
|
|--Card
   |
   |--Card.js
   |--Card.scss
   |--index.js
|--Some Other Component Folder 

Card.js：

import React, { Component } from 'react';
import classes from './Card.scss';

export class Card extends Component {

    render () {
        return (
            <div className={`${classes.layout} col`}>
                <div className={`${classes.card} card`}>
                    <div className="card-image">
                        <ProviderImage />
                    </div>
                </div>
            </div>
        );
    }
}

export default Card;

Card.scss：

.layout {
    img {
        display: block;
        max-width: 372px;
        max-height: 372px;
        height: auto;
        width: auto;
    }
}

.card {
    width: 370px;
    height: 550px;
}

这样可以将样式保存到各自的组件中。

Answer 3

从技术上讲，您可以像使用普通的CSS文件一样在HTML文档<head>中添加CSS。只要您的React组件具有相同的类（除了明显应用为className而不仅仅是class），那么它将起作用。

如果您正在寻找更现代和面向Javascript的内容，您可以查看CSS Modules，并在此处详细了解它们：

https://css-tricks.com/css-modules-part-1-need/

尽管如此，第二种方法显然有点学习曲线。

Answer 4

正如维杰所说，React prefers inline styles。

一个常见的模式是每个Component都有一个styles对象，其中包含该Component中使用的所有样式，如下所示：

var styles = {
  navBar: {
    backgroundColor: 'dark blue'
  },
  center: {
    textAlign: 'center'
  },
  rightNav: {
  },
  verticalLine: {
  },
};

var NavBar = React.createClass({
  render: function() {
    return (
      <div style={styles.navBar} >
        <img src="logo.png" />
        <div style={styles.center} >
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div style={styles.rightNav}>
          <div style={styles.center}>
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div style={styles.verticalLine} >&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});

Answer 5

我认为首先你需要导入你的css或scss文件，我建议你去直接路径：

import "components/card/card";

为了使其正常工作，您需要在项目中运行SASS加载器和webpack。

你需要在webpack.config

中安装sass加载器

  module: {
    loaders: [
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
      {test   : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]'
      }
    ]

我重新使用"sass-loader": "^3.0.0",

加载程序需要一个解决方法来使用Windows，在Mac上它工作正常：

• 在文件夹选项上显示隐藏文件。

• 转到'user / appData'文件夹，它应该是：C：\ Users \ user \ AppData \ Roaming \ npm

• 添加windows环境变量：NODE_PATH C：\用户\用户\应用程序数据\漫游\ NPM \ nodeModules

• 运行命令npm install -g

• 关闭并重新打开命令提示符。

有了这个，你可以加载sass并用webpack编译它，我建议用它做反应，它真的很强大。

如果你没有使用webpack，可以在这里找到更多信息：http://webpack.github.io/docs/tutorials/getting-started/

在这里，您可以查看webpack构建过程的示例：Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

Answer 6

  

Sass使您可以按照以下方式嵌套CSS选择器：   HTML的相同视觉层次。注意过度嵌套的规则   会导致CSS合格，可能难以维护   通常被认为是不良做法。让我解释一下   例子。

Hero.jsx

import "./Hero.scss";

import React, { Component } from "react";

class Hero extends Component {
  render() {
    return (
      <div className="hero-component">
        <span className="hero-header">Scss is awsome.</span>
      </div>
    );
  }
}

export default Hero;

Hero.scss

.hero-component {
    .hero-header {
        <!-- Hero header style goes here -->
    }

    .other-class {}
}

Answer 7

我使用Sass (.scss)来设计我的React组件。我也用过PostCSS。它们也是模块化的。一旦你通过你的工作流程设置它（我使用webpack），你需要做的就是设置你的React应用程序的样式是导入包含你导入的部分等的style.scss（是的，.scss）您的index.js文件与您的主App.js一起位于root中。这就是为了让您的应用程序正常工作所需的一切。例如，这就是我现在正在处理的React应用程序的样子：

Index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import 'core-js/es6/map';
import 'core-js/es6/set';
import App from './App';
import './favicon.ico';
import './style/style.scss';

ReactDOM.render(
    <App />, document.getElementById('root')
);