差不多就是這個問題。 我有一個hilla/vaadin spring boot應(yīng)用程序正在運行，我想嘗試在我的應(yīng)用程序中實現(xiàn)react boostrap。 我使用npm在我的根文件夾中安裝了react boostrap和mdb boostrap 問題是，當(dāng)我在我的本地主機(jī)中查看我的頁面時，boostrap樣式并沒有被應(yīng)用。 這是我的頁面:

import { useState } from 'react';
import {
  MDBValidation,
  MDBValidationItem,
  MDBInput,
  MDBInputGroup,
  MDBBtn,
  MDBCheckbox
} from 'mdb-react-ui-kit';

export default function AboutView() {

  const [formValue, setFormValue] = useState({
    fname: 'Mark',
    lname: 'Otto',
    email: '',
    city: '',
    state: '',
    zip: '',
  });
  
  const onChange = (e: any) => {
    setFormValue({ ...formValue, [e.target.name]: e.target.value });
  };
  
  return (
<MDBValidation className='row g-3'>
<MDBValidationItem className='col-md-4'>
  <MDBInput
    value={formValue.fname}
    name='fname'
    onChange={onChange}
    id='validationCustom01'
    required
    label='First name'
  />
</MDBValidationItem>
<MDBValidationItem className='col-md-4'>
  <MDBInput
    value={formValue.lname}
    name='lname'
    onChange={onChange}
    id='validationCustom02'
    required
    label='Last name'
  />
</MDBValidationItem>
<MDBValidationItem feedback='Please choose a username.' invalid className='col-md-4'>
  <MDBInputGroup textBefore='@'>
    <input
      type='text'
      className='form-control'
      id='validationCustomUsername'
      placeholder='Username'
      required
    />
  </MDBInputGroup>
</MDBValidationItem>
<MDBValidationItem className='col-md-6' feedback='Please provide a valid city.' invalid>
  <MDBInput
    value={formValue.city}
    name='city'
    onChange={onChange}
    id='validationCustom03'
    required
    label='City'
  />
</MDBValidationItem>
<MDBValidationItem className='col-md-6' feedback='Please provide a valid zip.' invalid>
  <MDBInput
    value={formValue.zip}
    name='zip'
    onChange={onChange}
    id='validationCustom05'
    required
    label='Zip'
  />
</MDBValidationItem>
<MDBValidationItem className='col-12' feedback='You must agree before submitting.' invalid>
  <MDBCheckbox label='Agree to terms and conditions' id='invalidCheck' required />
</MDBValidationItem>
<div className='col-12'>
  <MDBBtn type='submit'>Submit form</MDBBtn>
  <MDBBtn type='reset'>Reset form</MDBBtn>
</div>
</MDBValidation>

  );
}

檢查完頁面后，我發(fā)現(xiàn)所應(yīng)用的樣式完全是lumo的，而不是我的:

user agent stylesheet
form {
    display: block;
    margin-top: 0em;
}
style attribute {
    --_vaadin-app-layout-navbar-offset-size: 57px;
    --_vaadin-app-layout-navbar-offset-size-bottom: 0px;
    --_vaadin-app-layout-drawer-offset-size: 320px;
}
<style>
:host([overlay]) {
    --vaadin-app-layout-drawer-offset-left: 0;
    --vaadin-app-layout-navbar-offset-left: 0;
}
@media (max-width: 800px), (max-height: 600px)
<style>
:host {
    --vaadin-app-layout-drawer-overlay: true;
}
<style>
:host {
    display: block;
    box-sizing: border-box;
    height: 100%;
    --vaadin-app-layout-transition: 200ms;
    transition: padding var(--vaadin-app-layout-transition);
    --vaadin-app-layout-touch-optimized: false;
    --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
    --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
    padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
    padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
}

<style>
body, html {
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    line-height: var(--lumo-line-height-m);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

有沒有辦法駁回這個？除了玩階級特異性？ 內(nèi)聯(lián)樣式或類特異性非常耗時，我希望有一個更快的選擇

預(yù)先感謝你能給我的任何幫助。

使用嘗試引導(dǎo)連接

<link rel=" stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">

和

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
  </script>

在你的index.html檔案里