Using multiple Style attributes inside react
Still you can optimize code like this, so that your render method looks neat.
Create variable of style JSON object.
const customStyle = {
color: this.props.todo.done ? "#e6e6e6" : "#4d4d4d",
textDecoration: this.props.todo.done ? "#e6e6e6 line-through" : "none"
};
Pass customStyle
object as props to style element.
<div className="col-md-9">
<span style={customStyle}>{this.props.todo.value}</span>
</div>;
ReactJS apply multiple inline styles
While I did some research for this, the answer is not inmediatly clear, one suggestion is:
<View style={Object.assign({}, styles.padding, styles.margin)}>
...
</View>
Object.assign() takes the list of arguments and merges them, however, if you don't pass the first empty object it will overwrite the first argument, so if you want to keep you styles clean you have to pass it.
However as of react 0.27.2 I got an asign error trying to do this.
Some further reading revealed:
<View style={StyleSheet.flatten([styles.postHeader, styles.flowRight])}>
...
</View>
Works just fine, but this is very verbose and not really intuitive, after I while I found another snippet:
<View style={[styles.postHeader, styles.flowRight]}>
For all intents and purposes this was what I was looking for.
I just thought of sharing this knowledge here since it seems fairly obvious but I could not find any documentation for it.
How to combine multiple inline style objects and inline css in react-native?
type 1: if you have one inline style
<View style = {{marginLeft: 7,paddingRight: "9%"}}></View>
type 2: if you have one style from styles object
<View style = {styles.TimelineLeftBorder}></View>
type 3: if you have two or more styles from styles object
<View style = {[styles.TimelineLeftBorder,styles.TimelineGreenColor]}></View>
type 4: if you have two or more styles from styles object and you want to give normal inline css also
<View style = {[styles.TimelineLeftBorder,styles.TimelineGreenColor,{marginLeft: 7}]}></View>
React.js inline style best practices
There aren't a lot of "Best Practices" yet. Those of us that are using inline-styles, for React components, are still very much experimenting.
There are a number of approaches that vary wildly: React inline-style lib comparison chart
All or nothing?
What we refer to as "style" actually includes quite a few concepts:
- Layout — how an element/component looks in relationship to others
- Appearance — the characteristics of an element/component
- Behavior and state — how an element/component looks in a given state
Start with state-styles
React is already managing the state of your components, this makes styles of state and behavior a natural fit for colocation with your component logic.
Instead of building components to render with conditional state-classes, consider adding state-styles directly:
// Typical component with state-classes
<li
className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />
// Using inline-styles for state
<li className='todo-list__item'
style={(item.complete) ? styles.complete : {}} />
Note that we're using a class to style appearance but no longer using any .is-
prefixed class for state and behavior.
We can use Object.assign
(ES6) or _.extend
(underscore/lodash) to add support for multiple states:
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
Customization and reusability
Now that we're using Object.assign
it becomes very simple to make our component reusable with different styles. If we want to override the default styles, we can do so at the call-site with props, like so: <TodoItem dueStyle={ fontWeight: "bold" } />
. Implemented like this:
<li 'todo-list__item'
style={Object.assign({},
item.due && styles.due,
item.due && this.props.dueStyles)}>
Layout
Personally, I don't see compelling reason to inline layout styles. There are a number of great CSS layout systems out there. I'd just use one.
That said, don't add layout styles directly to your component. Wrap your components with layout components. Here's an example.
// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
className="col-xs-12 col-sm-6 col-md-8"
firstName="Michael"
lastName="Chan" />
// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
<UserBadge
firstName="Michael"
lastName="Chan" />
</div>
For layout support, I often try to design components to be 100%
width
and height
.
Appearance
This is the most contentious area of the "inline-style" debate. Ultimately, it's up to the component your designing and the comfort of your team with JavaScript.
One thing is certain, you'll need the assistance of a library. Browser-states (:hover
, :focus
), and media-queries are painful in raw React.
I like Radium because the syntax for those hard parts is designed to model that of SASS.
Code organization
Often you'll see a style object outside of the module. For a todo-list component, it might look something like this:
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
getter functions
Adding a bunch of style logic to your template can get a little messy (as seen above). I like to create getter functions to compute styles:
React.createClass({
getStyles: function () {
return Object.assign(
{},
item.props.complete && styles.complete,
item.props.due && styles.due,
item.props.due && this.props.dueStyles
);
},
render: function () {
return <li style={this.getStyles()}>{this.props.item}</li>
}
});
Further watching
I discussed all of these in more detail at React Europe earlier this year: Inline Styles and when it's best to 'just use CSS'.
I'm happy to help as you make new discoveries along the way :) Hit me up -> @chantastic
Two classes on single react HTML element
If those are class names, then you can do with template strings (``)
<div className={`${styles.selectorname1} ${styles.selectorname2}`}>
Related Topics
CSS Selector for an Element Having Class .A and Class .B
Adding CSS Class to Multiple Elements
Make Some Gradient Move Endlessly in a Progress Bar Like in Windows 7
Divide Width of Element Between Child Divs with CSS
How to Use Absolute Path to Import Custom SCSS, When Using React + Webpack
Class Names Concatenated or Separated by a Space
Styling Overlapping Annotations in Text with HTML <Span> Tags and CSS
How to Get Rid of These SASS Linting Errors When Using Tailwind-CSS
Inner Div Locked to Lower Right Hand Corner of Outer Div
How to Use CSS Variables with Tailwind CSS
Is There a Working Implementation of CSS3 Grid Layout for Webkit
How to Render Segoe UI Font in Different Navigators and Os's
CSS Width 100% Including Overflow
Text-Decoration: Underline Vs Border-Bottom
CSS Body Background Image Fixed to Full Screen Even When Zooming In/Out