'Only apply Bootstrap CSS to certain children components

I have several components of Website A (e.g., a customized form) built in Bootstrap. I have Website B build in Docusaurus. Now, I would like to copy these components to Website B. As Bootstrap and Docusaurus have conflict in general. I'm thinking if it is possible to limit the css of Bootstrap to certain components.

For instance, initially, I have a form in a page myForm.mdx.md in Website B:

---
id: 'MyForm'
title: 'MyForm'
sidebar_label: 'MyForm'
---
import MyForm from '../src/components/MyForm';

Page containing MyForm
    
<MyForm>
</MyForm>

I tried to add <Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" ... ... /></Head> to the component of Website A to build src/components/MyForm/index.jsx of Website B:

class MyForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { successMessage: null }
  }
  componentDidMount() {}

  submit(e) {
    this.setState({ successMessage: true })
  }
  render() {
    return (
      <>
      <Head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
      </Head>
        <div className="container--fluid container">
          <div className="row">
            <div className="col">
              <form
                method="post"
                action="https://www.mywebsite.com/download"
                onSubmit={this.submit.bind(this)}
              >
                <div className="row">
                  <div className="col-lg-6 pt-3">
                    <div className="form-group">
                      <input
                        className="form-control"
                        placeholder="First name*"
                        name="firstname"
                        required
                      />
                    </div>
                  </div>
                  <div className="col-lg-6 pt-3">
                    <div className="form-group">
                      <input
                        className="form-control"
                        placeholder="Last name*"
                        name="lastname"
                        required
                      />
                    </div>
                  </div>
                </div>
                <div className="row">
                  <div className="col-lg-12 pt-3">
                    <div className="form-group">
                      {this.state.successMessage ? (
                        <div className="alert alert--success">
                          Thanks for downloading
                        </div>
                      ) : (
                        <button
                          type="submit"
                          className="btn  btnGreen form-control"
                          style={{background : "var(--ifm-color-primary-darker)" , border:"1px solid var(--ifm-color-primary-darker)" , color: "#fff"}}
                        >
                          Download
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </>
    )
  }
}

export default MyForm

The display of Website B shows that the form does have the Bootstrap style. However, we can see the conflicts in other parts (or children components) of website B: sidebar, navigations, etc.

So does anyone know if it is possible to only apply the css of Bootstrap to the component MyForm?

cssreactjstwitter-bootstrapsassdocusaurus


Solution 1:[1]

No, you'll have to override any "problems" caused by Bootstrap with CSS applied AFTER bootstrap.css.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Moebius

Related Questions