英文:
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
<link rel=" stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
and
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
in your index.html file
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论