Passing in class names to react components

Question

I am trying to pass in a classname to a react component to change it s style and cannot seem to get working   class Pill extends React Component      render          return          lt button className  pill  this props styleName   gt  this props children  lt  button gt                  lt Pill styleName  skill  gt Business lt  Pill gt    I am trying to change the style of the pill by passing in the name of the class that has the respective style  I am new to React so maybe I am not doing this the right way  Thanks

User · Answer

Just for the reference  for stateless components      ParentComponent js import React from  react   import   ChildComponent   from     child ChildComponent    export const ParentComponent        gt     lt div className  parent-component  gt       lt ChildComponent className  parent-component  child  gt                 lt  ChildComponent gt     lt  div gt      ChildComponent js import React from  react    export const ChildComponent      className  children      gt     lt div className   some-css-className   className    gt       children     lt  div gt    Will render    lt div class  parent-component  gt     lt div class  some-css-className parent-component  child  gt             lt  div gt   lt  div gt

User · Answer

As other have stated  use an interpreted expression with curly braces   But do not forget to set a default  Others has suggested using a OR statement to set a empty string if undefined    But it would be even better to declare your Props   Full example   import React    Component   from  react   import PropTypes from  prop-types    class Pill extends Component      render          return          lt button className   pill    this props className     gt  this props children  lt  button gt                 Pill propTypes       className  PropTypes string      Pill defaultProps       className

User · Answer

pill   this props styleName  will get  pill undefined  when you don t set the props  I prefer  className    pill       this props styleName            or  className    pill       this props styleName   this props styleName

User · Answer

For anyone interested  I ran into this same issue when using css modules and react css modules   Most components have an associated css module style  and in this example my Button has its own css file  as does the Promo parent component  But I want to pass some additional styles to Button from Promo  So the styleable Button looks like this   Button js  import React    Component   from  react  import CSSModules from  react-css-modules  import styles from    Button css   class Button extends Component      render          let button   null          className           if this props className     undefined           className   this props className            button            lt button className  className  styleName  button  gt           this props children         lt  button gt             return           button                export default CSSModules Button  styles   allowMultiple  true      In the above Button component the Button css styles handle the common button styles  In this example just a  button class  Then in my component where I want to use the Button  and I also want to modify things like the position of the button  I can set extra styles in Promo css and pass through as the className prop  In this example again called  button class  I could have called it anything e g  promoButton   Of course with css modules this class will be  Promo  button   2MVMD whereas the button one will be something like  Button  button   3972N  Promo js  import React    Component   from  react   import CSSModules from  react-css-modules   import styles from    Promo css    import Button from    Button Button   class Promo extends Component      render          return            lt div styleName  promo   gt             lt h1 gt Testing the button lt  h1 gt             lt Button className  styles button   gt               lt span gt Hello button lt  span gt             lt  Button gt           lt  div gt         lt  Block gt                 export default CSSModules Promo  styles   allowMultiple  true

User · Answer

You can achieve this by  interpolating  the className passed from the parent component to the child component using this props className  Example below   export default class ParentComponent extends React Component     render        return  lt ChildComponent className  your-modifier-class    gt         export default class ChildComponent extends React Component     render        return  lt div className   original-class     this props className  gt  lt  div gt

User · Answer

With React s support for string interpolation  you could do the following    class Pill extends React Component       render            return              lt button className   pill   this props styleName    gt  this props children  lt  button gt

User · Answer

In React  when you want to pass an interpreted expression  you have to open a pair of curly braces  Try   render        return        lt button className   pill    this props styleName     gt         this props children       lt  button gt           Using the classnames npm package  import classnames from  classnames    render       return        lt button className  classnames  pill   this props styleName   gt         this props children       lt  button gt

User · Answer

In Typescript you need to set types of HTMLAttributes and React FunctionComponent   In most cases you will need will be extending it to another interface or type     const List  React FunctionComponent lt ListProps  amp    React HTMLAttributes lt HTMLDivElement gt  gt        props  ListProps  amp  React HTMLAttributes lt HTMLDivElement gt      gt      return        lt div className  props className  gt         lt img className  mr-3  src  props icon  alt      gt         props context       lt  div gt           interface ListProps     context  string    icon  string

User · Answer

With React 16 6 3 and  Material UI 3 5 1  I am using arrays in className like className   classes tableCell  classes capitalize    Try something like the following in your case   class Pill extends React Component       render             return               lt button className    pill   this props styleName   gt  this props children  lt  button gt

[javascript] Passing in class names to react components

Examples related to javascript

Examples related to reactjs