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).
To pass class names as props to a React component:Pass a string containing the class names as a prop. Destructure the prop in the child component. Assign the class names to an element, e.g. <h2 className={className}>Content</h2> .
No, that's not true at all; you can definitely add your own id attributes to elements rendered in React components.
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.
1st way is to use props
<Row id = "someRandomID">
Wherein, in the Definition, you may just go
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
Peace.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With