37

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element:

<Row>
  <div className='some-style'>
   ...
</Row>

Ideally, we could just do:

<Row className='some-style'> 
  ...
</Row>

But this doesn't work and I'd presume it's because React-Bootstrap does not know where the className goes within the <Row> component (it should just style the <div> that has the row styles).

Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
Arman
  • 2,665
  • 3
  • 14
  • 19

2 Answers2

42

If you look at the code for the component you can see that it uses the className prop passed to it to combine with the row class to get the resulting set of classes (<Row className="aaa bbb"... works).Also, if you provide the id prop like <Row id="444" ... it will actually set the id attribute for the element.

Igorsvee
  • 4,101
  • 1
  • 25
  • 21
  • For some reason, I thought Row and Col couldn't be styled like this. I think there have been other components where I faced this issue, will update if I come across it in the future – Arman Jul 20 '16 at 18:11
21

The first way is to use props:

<Row id = "someRandomID">

Then in the definition, you may use:

const Row = props  => {
    <div id = {props.id}> something </div>
}

The same could be done with class, replacing id with className in the above example.

You might as well use react-html-id, that is an npm package. This is an npm package that allows you to use unique html IDs for components without any dependencies on other libraries.

Ref: react-html-id

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Mayank Gangwal
  • 519
  • 3
  • 8