html - 如何将 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

第一次阅读您的问题时，您会发现当您“React-ify”您的网页时，您现有的 CSS 似乎无法正常工作。

它应该。

如果不是，则说明还有其他问题需要进一步诊断才能修复。我最近在 React 中重写了我的一个元素，并继续使用完全相同的 CSS 文件，并且效果很好。

但是，如果您询问最好的方法...

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

但是，我不。它很困惑，很难改变，而且很容易变得笨拙。

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

但是为什么？这里有几个原因:

你的 CSS 是可重用的

如果您使用 React 方式设置内联样式，它非常适合几个组件。

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

很容易做出改变

当组件需要更新样式时，您不再需要深入研究 React 代码来找到正确的组件(或者它是父组件？)并修复它。

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

您不必担心覆盖

在 CSS 的级联部分，内联样式是最后一站。它们会覆盖所有内容。

起初，这听起来像是对您正在实现的样式的一个很好的解决方案，而且在宣传册网站中，也许它会很好。但是，当您开始使用更大的应用程序时，您会遇到几乎无法解决的问题。

与其与 CSS 的级联部分作斗争，不如使用它并将您的样式保留在同一个地方。

你到处都在使用 SCSS 和 LESS

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

但是当您迁移到任何其他框架时会发生什么？突然之间，那些内联样式就不能很好地工作了，你又回到了与我们其他人一起编写“普通”CSS 的状态。那么为什么只为一个框架改变一切呢？

我理解如果你全职从事 React 工作并且尝试新的最佳实践是有意义的，但对于我们大多数人来说，当你只能使用那个轮子时重新发明轮子是没有意义的一种车型。