React Bootstrap与MDB Bootstrap在Hilla/Vaadin中样式不生效的解决方法

在运行Hilla/Vaadin Spring Boot应用时，尝试集成React Bootstrap和MDB Bootstrap，已通过npm在根目录安装这两个库，但页面中Bootstrap样式未生效，仅能看到Lumo样式。页面代码如下：

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>

  );
}

检查页面样式后，发现仅加载了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;
}

除了内联样式或类特异性修改（这类方法耗时较长），是否有更快捷的方式覆盖Lumo样式？

1. 正确导入Bootstrap/MDB样式文件 #

仅安装npm包不会自动加载样式，需要在应用入口文件（如src/main.tsx或index.tsx）顶部导入核心样式：

// 导入MDB样式
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
// 若使用React Bootstrap，额外导入基础Bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css';

2. 调整样式加载顺序 #

Lumo样式默认全局生效，需确保Bootstrap/MDB样式在Lumo样式之后加载，才能覆盖默认样式。可通过修改入口文件的导入顺序，或在frontend/index.html中调整样式引用位置实现。

3. 禁用全局Lumo样式（可选） #

若希望完全替换Lumo样式，可在frontend/index.html中注释或删除Lumo主题的样式引用：

<!-- 注释此行以禁用全局Lumo样式 -->
<!-- <link rel="stylesheet" href="/frontend/themes/mytheme/styles.css"> -->

注意：此操作会影响整个应用的基础样式，需确保Bootstrap/MDB样式能覆盖所有元素。

4. 用CSS模块隔离页面样式（可选） #

若仅需在特定页面（如AboutView）使用Bootstrap样式，可创建专属CSS模块：

/* AboutView.module.css */
@import 'mdb-react-ui-kit/dist/css/mdb.min.css';
@import 'bootstrap/dist/css/bootstrap.min.css';

然后在组件中导入并应用：

import styles from './AboutView.module.css';

export default function AboutView() {
  return (
    <div className={styles.bootstrapContainer}>
      {/* 原组件内容 */}
    </div>
  );
}

5. 自定义Lumo主题变量（可选） #

若仅需调整部分全局样式，无需完全替换，可通过自定义Lumo CSS变量快速修改：

/* 在全局样式文件中添加 */
:root {
  --lumo-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 替换为Bootstrap字体 */
  --lumo-primary-color: #0d6efd; /* 替换为Bootstrap主色调 */
}

内容的提问来源于stack exchange，提问作者James