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

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

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

问题

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

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


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

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

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

/* global.css */

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

这将会覆盖默认样式中的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:

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>

  );
}

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


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;
}

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连接:

<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>
英文:

Try the bootstrap connection using the

  &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

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

in your index.html file

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

发表评论

匿名网友

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

确定