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

我一直在寻找，但是，我几乎没有运气找到任何样式来样式化我创建的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"));

最佳答案

仔细阅读您的问题后，当您对网页进行“反应”时，您现有的CSS似乎无法正常工作。

这应该。

如果不是这样，那么还有其他事情需要进一步诊断解决。我最近在React中重写了我的一个项目，并继续使用完全相同的CSS文件，并且一切正常。

但是，如果您要询问，这是解决此问题的最佳方法...

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

但是，我没有。它很杂乱，很难更改，很容易变得笨拙。

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

但为什么？原因如下:

您的CSS是可重用的

如果您使用React方式内联样式，那么它对两个组件非常有用。

但是，当这些组件开始堆叠时，您就会开始意识到自己一次又一次地使用相同的样式。真烂

进行更改很容易

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

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

您不必担心覆盖

在CSS的级联部分，内联样式是最终停止。他们覆盖了一切。

最初，这听起来像是对您所实现的样式的绝佳解决方案，在小册子网站上，也许会很好。但是，当您开始使用更大的应用程序时，就会遇到几乎无法解决的问题。

与其处理CSS的层叠部分，不如使用CSS并将样式保持在同一位置。

您随处使用SCSS和LESS

对我来说，最大的好处是，如果您使用React，并且更喜欢内联样式，那么它们可以很好地工作。

但是，当您转移到任何其他框架时会发生什么？突然之间，那些内联样式无法很好地工作，并且您又回到了与我们其他人一起编写“普通” CSS的位置。那么，为什么只为一个框架进行更改呢？

我了解您是否专职从事React，并且尝试新的最佳实践是很有意义的，但是对于我们大多数人来说，当您只能在一个模型上使用那个轮子时，重新发明轮子是没有意义的汽车。

关于html - 如何将CSS和样式应用于React组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38545219/