Where to define CSS files in React-Bootstrap?

Question

Defining custom css for a class got me confused.

The React-Bootstrap documentation says, you can define a custom non-bootstrap style by using bsClass.

But, here are my doubts:-

1. Do we need to include the custom stylesheet link in the entry html page?
2. If no, then how is node environment, able to recognise where are the css files located?

Answer 1

how is node environment able to recognize where are the css files located?

You need to add it to your page manually.

One approach (if you use webpack and have css-loader plugin installed, which is by default for react-create-app) is to include your .css file inside a component that needs specific stylesheet:

import './mystylesheet.css'

So your component will look something like this:

import React from 'react'
import { Button } from 'react-bootstrap'
import './mystylesheet.css'

export default function MyCustomButton(props) {
  return <Button bsClass="my-custom-class">My button</Button>
}