Pass style as props in react component

Question

I created a event-box component in react. What I want is whenever is it called, I passed color values as props which later get used to set its border. Currently, I set two hardcoded class names and passed them as props with the component. Is there any other way to do so as I won't able to add all the color class names in my stylesheet.

Component code


import React from 'react';

class EventBox extends React.Component{
    constructor(props)
    {
        super(props);
        this.state={

        }
    }
    render()
    {
        const style={
            marginBottom:'0px'
        }
        const list={
            display:'inline-flex',
            width:'100%',
            marginBottom:'10px'
        }
        const listItem={
            flex:'1',
            display:'flex'
        }
        return(
            <div className={this.props.class}>
                <ul className="list list-inline" style={list}>
                    <li className="list-inline-item color-golden" style={listItem}>1 March 2020</li>
                    <li className="list-inline-item color-red flex flex-end" style={listItem}>200 People Interested</li>
                </ul>
                <h3 className="sub-heading roboto">Title</h3>
                <p className="paragraph roboto" style={style}>Saket, New Delhi</p>
                <p className="paragraph roboto" style={style}>Time: 05:00 P.M - 06:30 P.M</p>

            </div>
        )
    }
}
export default EventBox;


 <EventBox class="col-md-12 event-box-container red-border" />
 <EventBox class="col-md-12 event-box-container green-border" />

CSS

.event-box-container.red-border{
    border-top: 8px solid red;
}
.event-box-container.green-border{
    border-top: 8px solid green;
}

Anatol · Accepted Answer · 2020-11-12T09:51:33.380

35

You can just pass the dynamic styles to the component as an object.

For Class-Based Components:

import React from 'react';

class EventBox extends React.Component{
    render() {
        return(
            <div className="col-md-12 event-box-container" style={this.props.style}>
            </div>
        )
    }
}
export default EventBox;

For Functional Components:

import React from 'react';

const EventBox = ({ style }) => {
    return(
        <div className="col-md-12 event-box-container" style={style}>
        </div>
    )
}
export default EventBox;

Usage

<EventBox style={{ borderTop: '8px solid red' }} />
<EventBox style={{ borderTop: '8px solid green' }}  />

edited Nov 12 '20 at 09:51

answered Apr 15 '20 at 10:50

Anatol

3,720
2
20
40

What is the official name for this pattern of using as JS object with `style=`? Is this _CSS in JS_? – CodeFinity May 29 '21 at 18:07
4

@CodeFinity it is simply passing inline styles as a JS object – Anatol May 30 '21 at 07:04
@Anatol how to add autocomplete in vscode as well? – Aviral Sep 16 '21 at 13:44
3

@Aviral you would have to use something like TypeScript. Here is how you would do it with TS https://stackoverflow.com/a/45116780/11804213 – Anatol Sep 16 '21 at 17:06
This works with inline style , but how to pass when style is defined scss file? – gavdix Nov 23 '22 at 13:38

score 1 · Answer 2 · answered Dec 10 '22 at 13:42

Another way is to use styled-components. For example:

import styled from 'styled-components/native'

const Component = ({style}) => {

  return (
    <View style={style}>
    {/* More components here */}
    <View>
  )
}

const Styled = styled(Component)`
  padding-top: 10px;
`

Pass style as props in react component

2 Answers2