如何将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更喜欢内联样式.

但是,我没有.它很乱,很难改变,很容易变得笨拙.

SCSS或LESS是React风格的最佳方式.

但为什么？原因如下:

你的CSS可以重用

如果你用的方式做出反应内嵌样式,它的工作原理伟大的一对夫妇组件.

但是当这些组件开始堆叠时,你会开始意识到你一次又一次地使用相同的样式.哪个很烂.

这很容易做出改变

当组件需要更新的样式时,您不再需要深入查看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

从技术上讲,您可以<head>像在普通CSS文件中一样在HTML文档中添加CSS.只要您的React组件具有相同的类(除了明显应用为classNameno class),它就会起作用.

如果您正在寻找更现代和面向Javascript的东西,您可以查看CSS模块,并在此处阅读更多相关信息:

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

尽管如此,第二种方法显然还有更多的学习曲线.