极客观点
项目管理
HarmonyOS
我一直在寻找，但是，我没有找到任何方法来设置我创建的 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" /> 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"> </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"));
原文由 user1709237 发布，翻译遵循 CC BY-SA 4.0 许可协议
第一次阅读您的问题时，当您“反应”您的网页时，您现有的 CSS 似乎无法正常工作。
这应该。
如果不是，则还有其他问题需要进一步诊断才能修复。我最近在 React 中重写了我的一个项目，并继续使用完全相同的 CSS 文件，并且效果很好。
但是，如果你问的是解决这个问题 的最佳方法……
正如其他人所说， React 更喜欢内联样式。
但是， _我没有_。它很混乱，很难改变，而且很容易变得笨拙。
SCSS 或 LESS 是在 React 中设置样式的最佳方式。
但为什么？这里有几个原因：
你的 CSS 是可重用的
如果你使用 React 方式内联样式，它对几个组件 非常 有用。
但是，当这些组件开始堆积时，您就会开始意识到自己在一次又一次地使用相同的样式。这很糟糕。
改变很容易
当组件需要更新样式时，您不再需要挖掘 React 代码来找到正确的组件（或者它是父组件？）并修复它。
相反，只需像您一直使用的那样使用 CSS。
您不必担心覆盖
在 CSS 的级联部分， 内联样式是最后一站。他们覆盖一切。
起初，这听起来像是对您正在实施的样式的一个很好的解决方案，并且在宣传册网站中，也许它会很好。但是当您开始使用更大的应用程序时，您会遇到几乎无法解决的问题。
与其与 CSS 的级联部分作斗争，不如使用它并将您的样式保留在同一个地方。
你到处都使用 SCSS 和 LESS
对我来说最重要的一点是，如果你在 React 中工作并且你更喜欢内联样式，它们可以很好地工作。
但是当你转移到任何其他框架时会发生什么？突然之间，那些内联样式就不能很好地工作了，你又回到了与我们其他人一起编写“普通”CSS 的状态。那么为什么只为一个框架改变一切呢？
我理解如果你全职工作在 React 中并且尝试新的最佳实践是有意义的，但对于我们大多数人来说，当你只能在一个模型上使用那个轮子时重新发明轮子是没有意义的车。