React Bootstrap和MDB Bootstrap在Hilla/Vaadin内部不起作用。

huangapple
go评论97阅读模式
英文:

React boostrap and MDB boostrap doesn't work inside Hilla/Vaadin

问题

除了调整类别特异性以外，还有其他方法可以覆盖此样式吗？内联样式或类别特异性非常耗时，我希望有更快的选择。

谢谢你提前给我提供的任何帮助。

你可以尝试使用全局样式覆盖这些样式，而不必依赖类别特异性或内联样式。为此，你可以在你的React应用程序中创建一个全局CSS文件，并在其中定义样式规则，以覆盖默认样式。

首先，在你的项目中创建一个全局CSS文件，例如"global.css"，并确保在应用程序中引入它。

然后，你可以在这个全局CSS文件中定义你希望覆盖的样式规则。例如，如果你想更改form元素的样式，可以这样做：

  1. /* global.css */
  3. form {
  4.     /* 你的自定义样式规则 */
  5.     background-color: #fff; /* 以你希望的背景颜色为例 */
  6.     /* 添加其他自定义样式属性 */
  7. }

这将会覆盖默认样式中的form元素样式。确保在全局CSS中使用足够的特异性以确保你的规则优先于默认样式。

最后，确保在React组件中引入这个全局CSS文件，以便应用你的自定义样式。

使用全局CSS覆盖样式是一种更快的方式，不需要依赖类别特异性或内联样式。希望这可以帮助你解决问题！

英文:

pretty much the question.
i have a hilla/vaadin spring boot application running and i want to experiment implementing react boostrap inside my application.
i installed both react boostrap and mdb boostrap using npm in my root folder
the thing is when i look at my page in my localhost the boostrap style is not applied.
this is my page:

  1. import { useState } from 'react';
  2. import {
  3.   MDBValidation,
  4.   MDBValidationItem,
  5.   MDBInput,
  6.   MDBInputGroup,
  7.   MDBBtn,
  8.   MDBCheckbox
  9. } from 'mdb-react-ui-kit';
  11. export default function AboutView() {
  13.   const [formValue, setFormValue] = useState({
  14.     fname: 'Mark',
  15.     lname: 'Otto',
  16.     email: '',
  17.     city: '',
  18.     state: '',
  19.     zip: '',
  20.   });
  21.   
  22.   const onChange = (e: any) => {
  23.     setFormValue({ ...formValue, [e.target.name]: e.target.value });
  24.   };
  25.   
  26.   return (
  27. <MDBValidation className='row g-3'>
  28. <MDBValidationItem className='col-md-4'>
  29.   <MDBInput
  30.     value={formValue.fname}
  31.     name='fname'
  32.     onChange={onChange}
  33.     id='validationCustom01'
  34.     required
  35.     label='First name'
  36.   />
  37. </MDBValidationItem>
  38. <MDBValidationItem className='col-md-4'>
  39.   <MDBInput
  40.     value={formValue.lname}
  41.     name='lname'
  42.     onChange={onChange}
  43.     id='validationCustom02'
  44.     required
  45.     label='Last name'
  46.   />
  47. </MDBValidationItem>
  48. <MDBValidationItem feedback='Please choose a username.' invalid className='col-md-4'>
  49.   <MDBInputGroup textBefore='@'>
  50.     <input
  51.       type='text'
  52.       className='form-control'
  53.       id='validationCustomUsername'
  54.       placeholder='Username'
  55.       required
  56.     />
  57.   </MDBInputGroup>
  58. </MDBValidationItem>
  59. <MDBValidationItem className='col-md-6' feedback='Please provide a valid city.' invalid>
  60.   <MDBInput
  61.     value={formValue.city}
  62.     name='city'
  63.     onChange={onChange}
  64.     id='validationCustom03'
  65.     required
  66.     label='City'
  67.   />
  68. </MDBValidationItem>
  69. <MDBValidationItem className='col-md-6' feedback='Please provide a valid zip.' invalid>
  70.   <MDBInput
  71.     value={formValue.zip}
  72.     name='zip'
  73.     onChange={onChange}
  74.     id='validationCustom05'
  75.     required
  76.     label='Zip'
  77.   />
  78. </MDBValidationItem>
  79. <MDBValidationItem className='col-12' feedback='You must agree before submitting.' invalid>
  80.   <MDBCheckbox label='Agree to terms and conditions' id='invalidCheck' required />
  81. </MDBValidationItem>
  82. <div className='col-12'>
  83.   <MDBBtn type='submit'>Submit form</MDBBtn>
  84.   <MDBBtn type='reset'>Reset form</MDBBtn>
  85. </div>
  86. </MDBValidation>
  88.   );
  89. }

after inspecting the page i found that the style applied is exclusevely lumo not mine:

  2. user agent stylesheet
  3. form {
  4.     display: block;
  5.     margin-top: 0em;
  6. }
  7. style attribute {
  8.     --_vaadin-app-layout-navbar-offset-size: 57px;
  9.     --_vaadin-app-layout-navbar-offset-size-bottom: 0px;
  10.     --_vaadin-app-layout-drawer-offset-size: 320px;
  11. }
  12. <style>
  13. :host([overlay]) {
  14.     --vaadin-app-layout-drawer-offset-left: 0;
  15.     --vaadin-app-layout-navbar-offset-left: 0;
  16. }
  17. @media (max-width: 800px), (max-height: 600px)
  18. <style>
  19. :host {
  20.     --vaadin-app-layout-drawer-overlay: true;
  21. }
  22. <style>
  23. :host {
  24.     display: block;
  25.     box-sizing: border-box;
  26.     height: 100%;
  27.     --vaadin-app-layout-transition: 200ms;
  28.     transition: padding var(--vaadin-app-layout-transition);
  29.     --vaadin-app-layout-touch-optimized: false;
  30.     --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
  31.     --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
  32.     padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
  33.     padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
  34. }
  36. <style>
  37. body, html {
  38.     font-family: var(--lumo-font-family);
  39.     font-size: var(--lumo-font-size-m);
  40.     line-height: var(--lumo-line-height-m);
  41.     -webkit-text-size-adjust: 100%;
  42.     -webkit-font-smoothing: antialiased;
  43.     -moz-osx-font-smoothing: grayscale;
  44. }

is there any way to overrule this? other than playing with class specificity?
inline style or class specificity are very time consuming and i would like a faster option

thank you in advance for any help you can give me.

答案1

得分: 1

尝试使用以下内容在你的index.html文件中引用Bootstrap连接：

  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
  2. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
英文:

Try the bootstrap connection using the

  1.   &lt;link rel=&quot; stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot;&gt;

and

  1. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot;&gt;
  2.   &lt;/script&gt;

in your index.html file

huangapple
  • 本文由 发表于 2023年6月15日 16:07:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76480377.html
  • css
  • hilla
  • java
  • reactjs
  • vaadin
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定