I am a complete beginner to React and I seem to be facing an issue with rendering CSS properly.
The react class, App, that I have should display a Card with a progress tracker on it.
var App = React.createClass({
render: function () {
var pushNotifications = _.map(this.props.pushNotifications, function(value, key, notification) {
return (
<div className="row" key={1}>
<div className="col-sm-12">
<Card>
<h1>Title</h1>
<div className="clearfix">
<ol class="progtrckr" data-progtrckr-steps="5">
<li class="progtrckr-done">Order Processing</li>
<li class="progtrckr-done">Pre-Production</li>
<li class="progtrckr-done">In Production</li>
<li class="progtrckr-done">Shipped</li>
<li class="progtrckr-todo">Delivered</li>
</ol>
<div className="pull-right">
<p>Total: {iOSTotal}</p>
</div>
</div>
</Card>
Definition of Card:
module.exports = React.createClass({
render: function() {
return (
<div className="card">
{this.props.children}
</div>
)
}
});
The proctrckr CSS is located in the css/build file as follows:
ol.progtrckr {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%; }
... (CSS continues)
However, when I run this code, it just displays a regular ordered list without applying any of the CSS styling I wrote.
Any assistance or guidance would be highly appreciated.
Thank you,