只对某些子组件应用Bootstrap CSS

我有几个组件的网站A(例如，一个自定义的形式)内置在Bootstrap。我的网站B是用Docusaurus建立的。现在，我想把这些组件复制到b网站。因为Bootstrap和Docusaurus通常有冲突。我在想是否可以将Bootstrap的css限制在某些组件。

例如，最初，我在网站B的myForm.mdx.md页面中有一个表单:

---
id: 'MyForm'
title: 'MyForm'
sidebar_label: 'MyForm'
---
import MyForm from '../src/components/MyForm';
Page containing MyForm
    
<MyForm>
</MyForm>

我尝试将<Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" ... ... /></Head>添加到网站A的组件中以构建网站B的src/components/MyForm/index.jsx:

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/bootstrap@5.0.2/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

网站B的显示显示表单确实具有Bootstrap样式。但是，我们可以在网站B的其他部分(或子组件)看到冲突:边栏，导航等。

那么，有没有人知道，如果它是可能的，只适用于引导的css组件MyForm ?

不行，你必须重写任何"问题"。Bootstrap . CSS .

相关内容

最新更新

热门标签：