首页 > 其他分享 >REACT 里面的css文件style不显示

REACT 里面的css文件style不显示

时间:2024-02-07 21:11:44浏览次数:29  
标签:style 自定义 App bootstrap REACT import css

问题现象

在App.jsx同路径下的App.css定义中的style不显示,被上面的样式覆盖了。(使用vite创建的REACT app)

问题现象

分析

img
点击目前应用的样式右上角的style图标定位到,现在的样式是由引入的bootstrap.css定义的,可看到网页html中自定义css在bootstrap.css上面。由于
javascript是从上到下编译的,如果自定义css放前面,那么就会被后面的bootstrap覆盖。

解决方法

As shown in the code above, we’ve imported both Bootstrap CSS and its associated JavaScript file. We’ve also made sure to import Bootstrap before our main CSS file index.css so as to make it easier to alter Bootstrap’s default styling with this file as desired. ---- from a blog

当同时import了自定义css和bootstrap.css时,把bootstrap放前面,这样可以更容易修改bootstrap默认的样式。
在App.jsx中修改成如下import顺序之后,网页成功改成了黑色背景

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

修改后网页

参考

https://blog.logrocket.com/using-bootstrap-react-tutorial-examples/
https://stackoverflow.com/questions/69225789/react-bootstrap-css-overriding-custom-css

标签:style,自定义,App,bootstrap,REACT,import,css
From: https://www.cnblogs.com/someonefake/p/18011273

相关文章

  • react引用async异步函数数据渲染
    当需要在React组件中引用异步函数获取的数据时,可以使用useState钩子来存储数据,并在组件渲染时进行处理。下面是一个示例,展示了如何在React中引用异步函数的数据并进行渲染:importReact,{useState,useEffect}from'react';functionMyComponent(){const[data,......
  • react使用判断,显示相关组件----会出现代码,正确的写法是怎样的
    如题,下面的写法,在实际显示的时候,会出现代码constSpeakLoading=(props)=>{return(<RecordLoadingWrapper>props.iatStatus=='ing'&&(<div>正在倾听,请说话</div><imgclassName="recording-img"src={audioImg}alt=&......
  • @import '~@/commonStyles/index.less'; 这里的'~@是什么写法
    在现代前端项目中,特别是在使用webpack等构建工具时,~@是一种约定的写法,用于处理模块化的CSS或预处理器(如Less、Sass)文件的导入。这里的~@/commonStyles/index.less表示:~符号:在一些构建系统中(尤其是webpack),此符号告诉构建工具这是一个模块请求,而非一个相对于当前文件的相对路......
  • nginx改变访问应用端口以及解决css,js或表单提交访问不到的问题
    场景如果原先某个网站是通过ip:8080直接访问的,现在想要加个前缀,并且去掉端口进行访问,比如ip/myapp去访问这个项目,可以通过nginx来实现这个过程。最近有个需求需要变更redmine的访问路径,从ip:8080改成ip/redmine,下面以redmine举例子。配置过程以ip/redmine来访问原先ip:8080的项......
  • Animate.css + Vue2
    Animate.css+Vue2包:https://www.npmjs.com/package/vue2-animate安装:npminstall--savevue2-animate导入:import'vue2-animate/dist/vue2-animate.min.css';使用1:<transitionname="fadeLeft"><pv-if="isShow">he......
  • 了解 StyleX 么?
    近日,Meta开源了一款CSS-in-JS库 —— StyleX。看命名方式,Style-X是不是有点像JS-X,他们有关系么?当然有。JSX是一种用JS描述HTML的语法规范,广泛应用于前端框架中(比如React、SolidJS...),由Meta公司提出。同样的,按照Meta的设想,StyleX是一种用JS描述CSS的语法规范。早在ReactConf......
  • css的使用
    font连写font-style设置文字是否倾斜font-weight设置文字是否加粗font-family设置文字类型,例如宋体文字连写格式:{font:font-stylefont-weightfont-sizefont-family}例如:p{font:normol70020px"宋体"}text-decoration设置文本划线位置(a标签一般会去掉下划线)underline设......
  • React中的错误边界处理是指的哪些?
    React中的错误边界处理是指的哪些?在React中,错误边界(ErrorBoundaries)是一种React组件,它能够捕获并处理其子组件树任何位置上抛出的JavaScript错误,并且阻止这些错误导致整个应用崩溃。当一个错误边界内的子组件发生渲染错误、生命周期方法中的错误或其他同步错误时,错误边界会捕获......
  • React中的命令式 行为是指的哪些
    在React中,命令式行为通常指的是那些直接操作DOM或修改数据源而不通过React的声明式机制(如setState、useStateHook等)的操作。React的核心理念是声明式编程,它鼓励开发者描述UI应该是什么样子,而不是如何改变它。命令式行为示例包括:直接操作DOM:使用原生JavaScript方法如element......
  • css实现 背景重复线条 实现盒子四个角发光效果 实现内阴影加边框发光效果
     背景重复线条 width:100%;height:100%;//background-color:rgba(51,73,102,1);background-image:linear-gradient(toleft,#3349660.02rem,transparent0.01rem);background-repeat......