React js inline style best practices

Question

I m aware that you can specify styles within React classes  like this  const MyDiv   React createClass     render  function         const style           color   white         fontSize  200                 return  lt div style  style  gt  Have a good and productive day   lt  div gt            Should I be aiming to do all styling this way  and have no styles at all specified in my CSS file  Or should I avoid inline styles completely  It seems odd and messy to do a little bit of both - two places would need to be checked when tweaking styling

User · Answer

The style attribute in React expect the value to be an object, ie Key value pair.

style = {} will have another object inside it like {float:'right'} to make it work.

<span style={{float:'right'}}>{'Download Audit'}</span>

Hope this solves the problem

User · Answer

James K Nelson in his letter  quot Why You Shouldn   t Style React Components With JavaScript quot  states that there is no actual need of using inline styles with its downsides  His statement is that old boring CSS with less scss is the best solution  The part of his theses in favor of CSS   extendable externally severable  inline styles overleap everything  designer-friendly

User · Answer

I usually have scss file associated to each React component  But  I don t see reason why you wouldn t encapsulate the component with logic and look in it  I mean  you have similar thing with web components

User · Answer

2020 Update  The best practice is to use a library that has already done the hard work for you and doesn t kill your team when you make the switch as pointed out by the originally accepted answer in this video  it s still relevant   Also just to get a sense on trends this is a very helpful chart  After doing my own research on this I chose to use Emotion for my new projects and it has proven to be very flexible and scaleable     Given that the most upvoted answer from 2015 recommended Radium which is now relegated to maintenance mode  So it seems reasonable to add a list of alternatives  The post discontinuing Radium suggests a few libraries  Each of the sites linked has examples readily available so I will refrain from copy and pasting the code here    Emotion which is  inspired by  styled-components among others  uses styles in js and can be framework agnostic  but definitely promotes its React library  Emotion has been kept up to date as of this post   styled-components is comparable and offers many of the same features as Emotion  Also actively being maintained  Both Emotion and styled-components have similar syntax  It is built specifically to work with React components  JSS Yet another option for styles in js which is framework agnostic though it does have a number of framework packages  React-JSS among them

User · Answer

Depending on your configuration inline styling can offer you Hot reload  The webpage is immediately re-rendered every time the style changes  This  helps me develop components quicker  Having said that  I am sure you can setup a Hot reload environment for CSS   SCSS

User · Answer

You can use inline styles but you will have some limitations if you are using them in all of your stylings  some known limitations are you can t use CSS pseudo selectors and media queries in there   You can use Radium  to solve this but still  I feel has the project grows its gonna get cumbersome   I would recommend using CSS modules    using CSS Modules you will have the freedom of writing CSS in CSS file and don t have to worry about the naming clashes  it will be taken care by CSS Modules   An advantage of this method is that it gives you styling functionality to the specific component   This will create much more maintainable code and readable project architecture for the next developer to work on your project

User · Answer

You can use StrCSS as well  it creates isolated classnames and much more  Example code would look like  You can  optional  install the VSCode extension from the Visual Studio Marketplace for syntax highlighting support   source  strcss   import   Sheet   from  strcss   import React    Component   from  react    const sheet   new Sheet     map button     color green     color red  ios     fontSize 16   on hover     opacity  5   at mobile     fontSize 10      export class User extends Component     render         return  lt div className  sheet map button  gt          Look mom  I m green        Unless you re on iOS           lt  div gt

User · Answer

Comparing to writing your styles in a CSS file  React s style attribute has the following advantages   The ability to use the tools javascript as a programming language provides to control the style of your elements  This includes embedding variables  using conditions  and passing styles to a child component  A  quot component quot  approach  No more separation of HTML  JS  and CSS code wrote for the component  Component s code is consolidated and written in one place   However  the React s style attribute comes with a few drawbacks - you can t  Can t use media queries Can t use pseudo-selectors  less efficient compared to CSS classes   Using CSS in JS  you can get all the advantages of a style tag  without those drawbacks  As of today  there are a few popular well-supported CSS in js-libraries  including Emotion  Styled-Components  and Radium  Those libraries are to CSS kind of what React is to HTML  They allow you to write your CSS and control your CSS in your JS code  let s compare how our code will look for styling a simple element  We ll style a  quot hello world quot  div so it shows big on desktop and smaller on mobile  Using the style attribute return       lt div style   fontSize 24   className  quot hello-world quot  gt        Hello world     lt  div gt     Since media query is not possible in a style tag  we ll have to add a className to the element and add a css rule   media screen and  max-width  700px       hello-world         font-size  16px           Using Emotion s 10 CSS tag return       lt div       css             fontSize  24             CSS CONSTS MOBILE MAX MEDIA QUERY                fontSize  16                         gt        Hello world     lt  div gt     Emotion also supports template strings as well as styled-components  So if you prefer you can write  return       lt Box gt        Hello world     lt  Box gt     const Box   styled div     font-size  24px        CSS CONSTS MOBILE MAX MEDIA QUERY         font-size  16px           Behind the hoods  quot CSS in JS quot  uses CSS classes  Emotion specifically built with performance in mind and uses caching  Compared to React style attributes CSS in JS will provide better performance     Best Practices Here are a few best practices I recommend   If you want to style your elements inline  or in your JS  use a CSS-in-js library  don t use a style attribute    Should I be aiming to do all styling this way  and have no styles at all specified in my CSS file    If you use a css-in-js solution there is no need to write styles in CSS files  Writing your CSS in JS is superior as you can use all the tools a programming language as JS provides    should I avoid inline styles completely    Structuring your style code in JS is pretty similar to structuring your code in general  For example    recognize styles that repeat  and write them in one place  There are two ways to do this in Emotion      option 1 - Write common styles in CONSTANT variables    styles js export const COMMON STYLES        BUTTON  css        background-color  blue         color  white          hover            background-color  dark-blue                      SomeButton js const SomeButton    props    gt              return          lt button          css  COMMON STYLES BUTTON                      gt           Click Me        lt  button gt             Option 2 - Write your common styles in a dedicated component   const Button   styled button     background-color  blue      color  white       hover         background-color  dark-blue              const SomeButton    props    gt              return          lt Button     gt            Click me        lt  Button gt            React coding pattern is of encapsulated components - HTML and JS that controls a component is written in one file  That is where your css style code to style that component belongs   When necessary  add a styling prop to your component  This way you can reuse code and style written in a child component  and customize it to your specific needs by the parent component    const Button   styled button  COMMON STYLES BUTTON  props  gt props stl    const SmallButton    props   gt       lt Button                  stl  css font-size  12px       gt        Click me if you can see me     lt  Button gt     const BigButton    props    gt        lt Button                 stl  css font-size  30px        gt        Click me     lt  Button gt

User · Answer

I use inline styles extensively within my React components  I find it so much clearer to colocate styles within components because it s always clear what styles the component does and doesn t have  Plus having the full power of Javascript at hand really simplifies more complex styling needs   I wasn t convinced at first but after dabbling in it for several months  I m fully converted and am in process of converting all my CSS to inline or other JS-driven css methods   This presentation by Facebook employee and React contributor  vjeux  is really helpful as well     https   speakerdeck com vjeux react-css-in-js

User · Answer

For some components  it is easier to use inline styles  Also  I find it easier and more concise  as I m using Javascript and not CSS  to animate component styles   For stand-alone components  I use the  Spread Operator  or the        For me  it s clear  beautiful  and works in a tight space  Here is a little loading animation I made to show it s benefits     lt div style      this styles container     this state opacity   gt       lt div style      this state colors 0      this styles block    gt       lt div style      this state colors 1      this styles block    gt       lt div style      this state colors 2      this styles block    gt       lt div style      this state colors 7      this styles block    gt       lt div style      this styles block    gt       lt div style      this state colors 3      this styles block    gt       lt div style      this state colors 6      this styles block    gt       lt div style      this state colors 5      this styles block    gt       lt div style      this state colors 4      this styles block    gt     lt  div gt       this styles       container         display    flex        flexDirection    row        justifyContent    center        alignItems    center        flexWrap    wrap        width   21       height   21       borderRadius    50          block         width   7       height   7       borderRadius    50          this state       colors          backgroundColor   red          backgroundColor   blue          backgroundColor   yellow          backgroundColor   green          backgroundColor   white          backgroundColor   white          backgroundColor   white          backgroundColor   white          backgroundColor   white           opacity         opacity   0         EDIT NOVEMBER 2019  Working in the industry  A Fortune 500 company   I am NOT allowed to make any inline styling  In our team  we ve decided that inline style are unreadable and not maintainable  And  after having seen first hand how inline styles make supporting an application completely intolerable  I d have to agree  I completely discourage inline styles

User · Answer

What I do is give each one of my reusable component a unique custom element name and then create a CSS file for that component  specifically  with all styling options for that component  and only for that component   var MyDiv   React createClass     render  function         return  lt custom-component style  style  gt  Have a good and productive day   lt  custom-component gt            And in file  custom-component css   every entry will start with the custom-component tag  custom-component       display  block     have it work as a div       color   white       fontSize  200      custom-component h1      font-size  1 4em      That means you don t lose the critical notion of separating of concern  View vs style  If you share your component  it is easier for others to theme it to match the rest of their web page

User · Answer

Styling in JSX is very similar to styling in HTML   HTML Case      div style  background-color  red  color  white    JSX Case      div style    backgroundColor   red   color   white

User · Answer

The main purpose of the style attribute is for dynamic  state based styles   For example  you could have a width style on a progress bar based on some state  or the position or visibility based on something else   Styles in JS impose the limitation that the application can t provide custom styling for a reusable component   This is perfectly acceptable in the aforementioned situations  but not when you change the visible characteristics  especially color

User · Answer

The problem with inline styles is Content Security Policies  CSP  are becoming more common  which do not allow it   Therefore  I recommend avoiding inline styles completely  Update  To explain further  CSP is HTTP headers sent by the server that restrict what content can appear on the page   It is simply further mitigation that can be applied to a server to stop an attacker from doing something naughty if the developer code the site poorly  The purpose of most of these restrictions is to stop XSS  cross-site scripting  attacks   XSS is where an attacker figures out a way to include his own javascript on your page  for example  if I make my username bob lt SCRIPT gt alert  quot hello quot   lt  SCRIPT gt  and then post a comment  and you visit the page  it shouldn t show an alert   Developers should deny the ability to have a user add content like this to the site  but just in case they made a mistake  then CSP blocks the page from loading if it finds any script gt  tags  CSP is just an extra level of protection for developers to ensure if they made a mistake  that an attacker can t cause problems to visitors to that site  So that all is XSS  but what if the attacker can t include  lt script gt  tags but can include  lt style gt  tags or include a style  parameter on a tag   Then he might be able to change the look of the site in such a way that you re tricked into clicking the wrong button  or some other problem   This is much less of a concern  but still something to avoid  and CSP does that for you  A good resource for testing a site for CSP is https   securityheaders io  You can read more about CSP at http   www html5rocks com en tutorials security content-security-policy

User · Answer

I prefer to use styled-components  It provide better solution for design  import React    Component  Fragment   from  react  import styled from  styled-components    const StyledDiv   styled div      display  block      margin-left  auto      margin-right  auto      font-size 200     here we can set static     color    props   gt  props color     set dynamic color by props     export default class RenderHtml extends Component       render             return                lt Fragment gt                   lt StyledDiv color   white   gt                      Have a good and productive day                   lt  StyledDiv gt               lt  Fragment gt

User · Answer

It s really depends on how big your application is  if you wanna use bundlers like webpack and bundle CSS and JS together in the build and how you wanna mange your application flow  At the end of day  depends on your situation  you can make decision   My preference for organising files in big projects are separating CSS and JS files  it could be easier to share  easier for UI people to just go through CSS files  also much neater file organising for the whole application   Always think this way  make sure in developing phase everything are where they should be  named properly and be easy for other developers to find things     I personally mix them depends on my need  for example    Try to use external css  but if needed React will accept style as well  you need to pass it as an object with key value  something like this below   import React from  react    const App   props   gt      return        lt div className  app  style   background   red   color   white    gt      lt  lt  lt  lt look at style here         Hello World         lt  div gt         export default App

User · Answer

Here is the boolean based styling in JSX syntax   style   display  this state isShowing    inherit     none

User · Answer

Anyway inline css is never recommended  We used styled-components in our project which is based on JSS  It protects css overriding by adding dynamic class names on components  You can also add css values based on the props passed

User · Answer

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  lt li   className  classnames    todo-list  item   true   is-complete   item complete       gt       Using inline-styles for state  lt li className  todo-list  item   style   item complete    styles complete         gt    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  lt li  todo-list  item   style  Object assign     item complete  amp  amp  styles complete  item due  amp  amp  styles due    gt    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   lt TodoItem dueStyle   fontWeight   bold      gt   Implemented like this    lt li  todo-list  item   style  Object assign              item due  amp  amp  styles due           item due  amp  amp  this props dueStyles   gt    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  lt UserBadge  className  col-xs-12 col-sm-6 col-md-8   firstName  Michael   lastName  Chan    gt      This is much easier to maintain and change  lt div class  col-xs-12 col-sm-6 col-md-8  gt     lt UserBadge    firstName  Michael     lastName  Chan    gt   lt  div gt    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  amp  amp  styles complete        item props due  amp  amp  styles due        item props due  amp  amp  this props dueStyles                render  function          return  lt li style  this getStyles    gt  this props item  lt  li gt            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

User · Answer

Some time we require to style some element from a component but if we have to display that component only ones or the style is so less then instead of using the CSS class we go for the inline style in react js  reactjs inline style is as same as HTML inline style just the property names are a little bit different  Write your style in any tag using style   prop  value     import React    Component   from  react       import   Redirect   from  react-router        class InlineStyle extends Component         constructor props            super props           this state                      render             return              lt div gt               lt div gt                 lt div                 style                      color   red                     fontSize  40                    background   green                       this is inline style in reactjs                gt                  lt  div gt               lt  div gt             lt  div gt                               export default InlineStyle

[css] React.js inline style best practices

Examples related to css

Examples related to reactjs

Examples related to inline-styles