如何将CSS和样式应用到React组件 [英] How to apply CSS and Styling to a React component
问题描述
任何帮助将不胜感激！
var NavBar = React.createClass（{
render：function（）{
return（
/ * NavBar * /
< div className =dark_bg_color>
< img src =logo.png/>
< div className =table_center>
< div>
< ul>
< li>每日特价< / li>
< li>礼品店< / li>
< li>事件< / li>
< ; li>< i className =fa fa-search/>& nbsp; search< / li>
< / ul>
< / div>
< / div>
< div类名= right_nav >
< div className =table_center>
< div>
< button type =button>注册< /按钮>
< button type =button>登入< / button>
< div className =vertical-line>& nbsp;< / div>
< button type =button>购物车< / button>
< / div>
< / div>
< / div>
< / div>
）;
}
}）;
ReactDOM.render（< NavBar /> ;, document.getElementById（'nav'））;
$ b $ var Gallery = React.createClass（{
render：function（）{
return（
/ * Gallery * /
< div>
< div align =middle>
< div id =head>
< img id =picalign =middlemax-width = 100％src =title_pic.png/>
< div align =leftclassName =big>
< div>
< span>最佳< / span>
< div className =words>
< span> BonApp为您提供有限的时间，独特的餐饮和由城市最佳厨师提供的活动。 />< br />< br /><按钮类型=按钮> JOIN BONAPP< /按钮>< / span>
< / div>
< ; / div>
< / div>
< / div>
< / div>
< / div>
）;
}
}）;
ReactDOM.render（< Gallery /> ;, document.getElementById（Gallery））;
$ b $ var WhatsNew = React.createClass（{
render：function（）{
return（
< div className =dark_bg_color>
< h2 style = {{marginBottom：30}}>
< span>新增功能< / 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 = eventsclassName =dark_bg_color>
< div className =box>
< div className =box-text>
< div className =水平线/>
< div>< div className =horizontal-line/>< p>< p>< p>< p> div className =horizontal-line/>
< / div>
< / div>
< h2>
< span> Bon Events< / span> ;
< / h2>
< div>
< / div>
< / div>
）;
}
}）;
ReactDOM.render（< BonEvents /> ;, document.getElementById（events））;
$ b $ var IOS = React.createClass（{
render：function（）{
/ * IOS * /
return（
< div>
< h2>
< h2>
< / h2>
< / div>
）;
}
}）;
ReactDOM.render（< IOS /> ;, document.getElementById（advertiseApp））;
$ Footer = React.createClass（{
render：function（）{
return（
/ * Footer * /
< div>
< div className =footer_center>
< div>
< ul>
< li>关于< / li>
< li> PRESS< / li>
< li>联系< / li>
< li> SUPPORT< / li>
< li> BONAPP for RESTAURANTEURS< / li>
< / ul>
< / div>
< / div>
< div className =legal_center>
< div>
< ; ul>
< li>
< li> $ b< b< li>法律< / li>< / li>
< / ul>
< / div>
< / div>
< / div>
）;
}
}）;
ReactDOM.render（< Footer /> ;, document.getElementById（footer））;
首先阅读您的问题，现有的CSS在你'React-ify'你的网页时不工作。
它应该。
这不是，还有其他的事情需要进一步的诊断来修复。我最近在React中重写了我的一个项目，并继续使用完全相同的CSS文件，而且事情非常好。
然而，如果您询问最好的方法去... ...正如其他人所说， React更喜欢内嵌样式。
然而， >。它很混乱，可能很难改变，并且很容易变得笨拙。
SCSS或LESS是在React中设计风格的最佳方式。
但是为什么？以下是一些原因：您的CSS可重复使用
如果您使用React方式内嵌样式，对于一些组件来说，它们很棒。
但是，当这些组件开始叠加时，您会开始意识到您再次使用相同的样式，再次。这很糟糕。
很容易做出改变
当组件需要更新的样式时，挖掘你的React代码来找到正确的组件（或者它是父组件）并修复它。
相反，只需使用像你一直使用的CSS 。
您不必担心覆盖
在CSS的级联部分中，内联样式是最后一站。它们会覆盖所有的东西。
起初，这听起来像是一个很好的解决方案，你可以在手册网站上找到，也许没问题。但是，当你开始使用更大的应用程序时，你遇到的问题几乎不可能排除故障。
不用与CSS的级联部分作斗争，而是使用它并保持你的风格在同一个地方。
你使用SCSS& LESS Everywhere
对我来说最大的好处是肯定的，如果您在React工作，并且喜欢内联风格，那么他们可以很好地工作。
但是当你转向任何其他框架时会发生什么？突然间，这些内联样式不能很好地工作，并且您会重新与我们其他人一起编写正常的CSS。那么为什么要改变一个框架？
我理解你是否全职工作，尝试新的最佳实践是有意义的，但对于大多数我们，当你只能在一辆车上使用这个车轮时，重新发明车轮是没有意义的。
I have been looking, however, I have had little luck finding any way to style the React.js file that I have created, I converted it from a standard web page, so I have the original CSS, however, I do not know how to use React to display the page with the proper styling.
Any help would be appreciated!
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"));
A first read through your question makes it seem that your existing CSS isn't working when you 'React-ify' your webpage.
It should.
If it's not, there's something else going on that will need further diagnosing to fix. I recently rewrote one of my projects in React and continued to use the exact same CSS file and things worked great.
However, if you're asking about the best way to go about this...
As others have said, React prefers inline styles.
However, I don't. It's messy, can be difficult to change, and easily gets unwieldy.
SCSS or LESS are the best ways to style in React.
But why? Here are a few reasons:
Your CSS Is Reusable
If you style inline with the React way, it works great for a couple components.
But when those components start to stack up, you start realizing you're using the same styles again and again. Which sucks.
It's Easy to Make Changes
When a component needs an updated style, you no longer have to dig through your React code to find the right component (or was it the parent component?) and fix it.
Instead, just use CSS like you've always used.
You Don't Have to Worry About Overwriting
In the cascading part of CSS, inline styles are the final stop. They overwrite everything.
At first, it sounds like a great solution to the styles you're implementing, and in a brochure website, perhaps it would be fine. But when you start working with bigger apps, you run into issues that are almost impossible to troubleshoot.
Instead of fighting with the cascading part of CSS, work with it and keep your styles in the same place.
You Use SCSS & LESS Everywhere
The biggest point for me is yes, if you're working in React and you prefer inline styles, they can work great.
But what happens when you move to any other framework? All of a sudden those inline styles don't work so well, and you're back to writing 'normal' CSS with the rest of us. So why change things up just for one framework?
I understand if you work in React full-time and it makes sense to experiment with new best practices, but for most of us, it doesn't make sense to re-invent the wheel when you only can use that wheel on one model of car.
这篇关于如何将CSS和样式应用到React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
