如何将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或更低版本是在React中设置样式的最佳方式。

但是为什么呢？以下是几个原因：

你的CSS是可重用的

如果你用React的方式设置内联样式，那么它对于一些组件来说是非常好的。

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

很容易做出改变

当组件需要更新的样式时，您不再需要通过React代码来查找正确的组件(或者它是父组件吗？)把它修好。

相反，只要像你一直使用的那样使用CSS即可。

您不必担心覆盖

在CSS的级联部分，内联样式是最终的停止。它们会覆盖所有内容。

乍一看，这听起来像是你正在实现的风格的一个很好的解决方案，在一个小册子网站上，也许它会很好。但是，当你开始使用更大的应用程序时，你会遇到几乎不可能解决的问题。

与其使用CSS的级联部分，不如使用它，并保持您的样式在同一位置。

到处都在使用SCSS & LESS

对我来说，最重要的一点是，如果你在React中工作，并且你更喜欢内联风格，它们可以很好地工作。

但是，当您迁移到任何其他框架时会发生什么呢？突然之间，这些内联样式不能很好地工作，你又可以和我们一起写“普通”的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文件中一样在<head>文档中添加CSS。只要您的React组件具有相同的类(除了明显作为className应用，而不仅仅是class)，那么它就会工作。

如果你正在寻找更现代和更面向Javascript的东西，你可以看看CSS Modules，并在这里阅读更多关于它们的内容：

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

显然，使用第二种方法会有更多的学习曲线。