I am working on a react app and I have just added some react-bootstrap components. Problem is that the default bootstrap fonts have affected all of my text. I only found one solution on the web which recommended to link a css in the entry file and put the font import and css font property there, but that does not change anything for me.
This is the layout of my imports in Index.js:
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"
import 'bootstrap/dist/css/bootstrap.min.css';
import "./stylesheets/index.css"
As advised below, I have the bootstrap import ABOVE the stylesheet import. index.css contains
#import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #7f0b0d;
font-family: 'Kanit', sans-serif;
}
However, React-bootstrap is still over writing my font style with the ugliest font I have ever seen.
It affects all fonts inside of my BrowserRouter. My Navbar is unaffected as well as my footer. I even tried putting the style at the component level of the Font. Bootstrap still overwrites it.
CodeSandbox: https://codesandbox.io/s/exciting-moser-pdoq66?file=/src/index.js
import ReactDOM from "react-dom/client"
import App from "./App"
import "bootstrap/dist/css/bootstrap.min.css";
import "./stylesheets/index.css"
import { BrowserRouter } from "react-router-dom"
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
)
The order of the imports matter, if you have bootstrap imported after your css file then the boostrap styles will override your styles. So, update your imports as shown above.
Here is a link to sandbox
Related
I am currently working on a project with Vue 3 and Element Plus.
As of the moment, the element plus Icons are not showing on my app.
I have installed them with yarn using
$ yarn add #element-plus/icons
and I have no idea what to do next.
I have tried importing it on my main.ts file.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "#element-plus/icons";
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");
But it is not showing still.
The #element-plus/icons package contains named exports for each icon found in the Icon Collection. For example, to use the MagicStick icon, import it by name, and register it as a component. In Vue 3, you can use a <script setup> block to locally register the component simply by importing the component:
<script setup>
import { MagicStick } from '#element-plus/icons-vue'
</script>
Then use it as a component in your template:
within <el-icon>, which lets you easily specify the icon's size and color as props
Note: Clicking an icon card from the Icon Collection UI automatically copies boilerplate markup (<el-icon><magic-stick/><el-icon>) to your clipboard for easily pasting it into your own file.
<template>
<el-icon :size="100">
<MagicStick />
</el-icon>
</template>
or standalone, which requires applying your own styles:
<template>
<MagicStick class="icon" />
</template>
<style scoped>
.icon {
color: #f00;
height: 200px;
}
</style>
demo
I am trying apply a margin-top as a CSS class to my beginner react-project. However, the margin is not applying. Wondering if someone can clarify if something is wrong? I used create-react-app to create and in the package.json file, it says my react-scripts is 4.0.2 so I believe this is supported. Just not sure what I am doing wrong.Every content that is in a div, p-tags , etc are displaying fine. I just can't get the classes to apply.
.Content {
margin-top: 16px;
}
import React from 'react';
import Aux from '../../hoc/Auxillary';
import classes from './Layout.css';
const layout = (props) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main className={classes.Content}>
{props.children}
</main>
</Aux>
);
export default layout;
Change this:
import classes from './Layout.css';
To
import './Layout.css';
Then change this:
<main className={classes.Content}>
to
<main className={"Content"}>
If you're bent on importing your css file like so:
import classes from './Layout.css';
Change your CSS file name to ./layout.module.css, then import it this way:
import classes from './layout.module.css';
And only then can you access css class names using:
classes.Content
More on file naming conventions here: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
I made react app by CRA.
and I gonna use material ui and styling with SCSS.
I made main.css file by using node-sass.
and I tried to apply my main.css file to Material-ui Typography.
in main.css
.logoTitle {
font-size: 20rem;
}
But if loaded my web Typography element doesn't apply logoTitle styles..
what's my problem..?
When CSS specificity is the same, the styles that are declared last in the CSS will win. By default, Material-UI places its styles at the end of the <head> element. This means that the default styles in Material-UI will win over other styles declared in the <head> with the same specificity (such as your font-size case). You can change this behavior by wrapping the top-level of your app with the StylesProvider element with the injectFirst property. This will cause Material-UI to place its styles at the beginning of the <head> element.
Here is a working example:
App.js
import React from "react";
import Typography from "#material-ui/core/Typography";
import { StylesProvider } from "#material-ui/core/styles";
import "./styles.css";
export default function App() {
return (
<StylesProvider injectFirst>
<Typography variant="h1" color="primary" className="logoTitle">
Hello
</Typography>
</StylesProvider>
);
}
styles.css
.logoTitle {
font-size: 20rem;
}
Related answer: How to overwrite styles with classes and css modules?
Documentation: https://material-ui.com/styles/api/#stylesprovider
When I route my app to another component by using react-router-dom, the CSS doesn't change.
This is a minimalistic version of the code to demonstrate
App.js
import React from 'react';
import Home from './Home';
function App() {
return (
<div>
<Home></Home>
</div>
);
}
export default App;
Home.js
import React from 'react';
import './Home.css';
const Home = () => {
return (
<h1>Home</h1>
);
}
export default Home;
Home.css
body {
background-color: blue;
}
Dashboard.js
import React from 'react';
import './Dashboard.css';
import React from 'react';
import './Dashboard.css';
const Dashboard = () => {
return (
<div className='content'>
<h1>Dashboard</h1>
</div>
);
}
export default Dashboard;
Dashboard.css
.content {
display: flex;
align-content: center;
align-items: center;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Dashboard from './Dashboard';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/dashboard' component={Dashboard} />
</div>
</Router>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();
When I do /dashboard, it loads the Dashboard component, but it keeps the previous CSS that was loaded from the Home component that resides the App component. The background stays blue. I want that when I route to another component because I changed the URL, it loads whatever CSS that new component has attached to it and gets rid of whatever CSS was before. Is that possible?
Edit: I have made an example in CodeSandbox to illustrate. It's a little different from the code above due to the limitations of the playground, but the functionality is the same.
From what can be seen, importing as a module ends up importing it globally. If we comment the line import Home from "./Home"; the blue background disappears. Just importing the component, imports the whole CSS despite the CSS being imported in a modular way. I'm not sure if I am missing something.
Edit 2:
Here are the different solutions I tried:
CSS Modules, but the body style was still globally loaded.
Styled components don't let me modify the body or html selectors CSS. They require me to create a <div> element and
then have that element span the whole body which I would style
as if it was the body. Which is a workaround I don't want to use because for that I rather use CSS Modules for the whole body spanning .
Inline styling also doesn't let me modify the body or html selectors CSS. I would also need to use a workaround like a body spanning <div> as in Styled components.
The problem
When you import a css like you're doing here
import './Home.css';
you're importing it in a global scope, which means it will not disappear once imported.
The solutions
CSS Modules
What you want is either CSS Modules, which is used like this:
import styles from './Home.css';
<a className={styles.myStyleClass}>Hello</a>
Styled components
or a CSS-in-js framework such as styled components which is used like this:
import styled from 'styled-components';
const MyStyledElement = styled.a`
color: blue;
`;
<MyStyledElement>Hello</MyStyledElement>
Regular objects / inline styling
or just "regular" CSS-in-js like:
const myStyle = {
color: blue;
}
<a style={myStyle}>Hello</a>
There are plenty of options when it comes to styling, these alternatives are popular ones that I encourage you to explore and see which you enjoy.
After doing some more tests I have concluded that as of now it is not possible to change whatever CSS styles have been applied to a <body> or <html> selector in an React SPA when a CSS file is already loaded and one uses React Router to render other components. I still appreciate the answers and the time taken to help me find a solution. They are still valid answers if we are not talking about the <body> or <html> node in an HTML document. From them I learned about other ways to use CSS in React. I modified the original post with the solutions I tried.
What ended working was modifying the DOM styles with JavaScript whithin the component itself.
Home.js
import React from "react";
const Home = () => {
// Modify the DOM Styles with JavaScript
document.body.style.backgroundColor = "blue";
// Or uncomment below to modify the
// document root background color
// which in this case would be <html>
//document.bgColor = "blue";
// Or modify the root tag style of the document instead of the
// <body> (<html> in this case)
//document.documentElement.setAttribute('style', 'background-color: green');
return (
<div>
<h1>Home</h1>
<form action="/dashboard">
<input type="submit" value="Go to Dashboard" />
</form>
</div>
);
};
export default Home;
Here is a working example:
Where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.
By replacing the links with absolute paths as per this documentation, my problem was resolved.
For me, this meant changing
<head>
<link rel="stylesheet" href="./style.css" ></link>
</head>
to this:
<head>
<link rel="stylesheet" href="/style.css" ></link>
</head>
I'm not sure if the same thing would work for your import statements, but it is worth a shot.
More info: styles-not-working-with-react-router
I have started working on reactJS. I was watching a tutorial where Css was passed separately to jsx component and I tried doing the same but failed. There is no error, But the changes in CSS is not getting implemented.
I even installed loaders after this but not getting any result
npm i css-loader style-loader --save-dev
yarn add --dev css-loader style-loader
App.js
import React, { Component } from 'react';
import{Form, FormControl, Button} from 'react-bootstrap';
import './App.css';
class App extends Component{
render(){
return(
<div ClassName = "App">
<Form inline>
<h2>Input your Birthday! </h2>
<FormControl type = "date">
</FormControl>
{' '}
<Button>
Submit
</Button>
</Form>
</div>
)
}
}
export default App;
App.css
.App{
padding: 5%;
text-align: center;
font-size: 16px;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<App />, document.getElementById("root")
)
To start off, you need to import App.js in index.js ( I dont know why it is not throwing an error).
Secondly for the styles, I tried to change the class name from "App" to "app" and it works fine now. I am not sure ofthe reason tho, but it maybe something to do with "App" being reserved.
Here is code sandbox