Enable disable CSS style on different page particularly *, html, body tags
Question
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
font-size: 100%;
scroll-behavior: smooth;
position: relative;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #141414;
color:#fff;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 10px;
line-height: 1.2;
}
main {
margin : 0;
padding: 0;;
}
The above css (containing wildcard, html, body, main) I am importing into components in my app, no css module used . Issue is they conflict with styles on a different route and page which use its own css.
Its not an external stylesheet like <link rel='stylesheet' id= , so it doesnt have an id and it just appears as <style type="text/css">...</style>,... in <head>
Question:
The above css I want to enable only on one route, for example I want it on page /a but I want to reset or remove them completely on page /b . How do I achieve that?
I also saw React Routes - different styling on body css tag and How to apply CSS to HTML body element?
1 answers
solution1
1 2021-05-23 19:13:30
There are different solutions for this but best one seems like adding different class names for body in first mount of component and removing this class names in unmount. Other solution would be using a main div in component that has following css features
{
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
then body will stay behind this div and you can do every modification that you want in this div. But I would really recommend you to use first way.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.