How do I change the background color of my website because this doesn't work, please don't roast me too hard I hate css.
App.css
body {
background-color: darkslategray;
}
App.js
import { Box, ChakraProvider, Image } from "#chakra-ui/react";
import React from "react";
import './App.css';
function App() {
return (
<ChakraProvider>
<Box>
<Image
src='https://data.whicdn.com/images/349387980/original.jpg'
alt='Profile Image'
boxSize={100}
borderRadius='full'
border='4px'
borderColor='yellow'
/>
</Box>
</ChakraProvider>
)
}
export default App;
Using important in styles is a bad practice and you should not use it as much as possible. In your case maybe some another style on body is over writing in your style so when you used the important applied your style
Related
I'm using MUI v5 in my project and trying to apply styling to a Drawer so that the background color is black. Since this update was pretty recent I can't find much info on changing the styling of the component without using deprecated elements from MUI v4. Any tips for this? I would also appreciate some advice on applying a color that I've defined using createTheme from MUI as well.
import React from "react";
import {
Divider,
Drawer,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
} from "#mui/material";
import AddIcon from "#mui/icons-material/Add";
import SearchIcon from "#mui/icons-material/Search";
import HomeIcon from "#mui/icons-material/Home";
import qdjLogo from "../../assets/qdj_logo.png";
import "./styling/SideBarStyling.css";
import ProfileFooter from "./ProfileFooter";
function Sidebar() {
return (
<div>
<Drawer variant="permanent" anchor="left">
<div className={"wrapper"}>
<a href="">
<img className={"icon"} src={qdjLogo} alt="QDJ Logo" />
</a>
</div>
<ProfileFooter />
</Drawer>
</div>
);
}
export default Sidebar;
You can change the background color of the Drawer by styling the Paper component inside it using the sx prop:
<Drawer
PaperProps={{
sx: {
backgroundColor: "pink"
}
}}
{...}
/>
If you want to set the background-color to black, maybe you want a dark theme? You can configure MUI theme to automatically set the dark background for Paper by setting the dark mode like this:
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
Reference
https://mui.com/guides/migration-v4/#migrate-from-jss
You can simply override the theme like this:
const theme = createTheme({
components: {
MuiDrawer: {
styleOverrides: {
paper: {
background: "orange"
}
}
}
}
});
Here is a sandbox
I am fairly new to React and JavaScript in general.
I am using Button from react-bootstrap from https://react-bootstrap.github.io/components/buttons/ but I want to style the Button on top of it in my React app from my css file but it does not seem to apply.
my Home.js file looks like
import React from "react";
import '../App.css'; // Reflects the directory structure
export default function Home() {
return (
<div>
<h2>Home</h2>
<Button variant="light" className="formButtons">
</div>
)
}
My App.css file looks like
.formButtons {
margin: 10;
overflow-wrap: break-word;
color: red;
}
I can tell it does not apply since the text color isn't red.
Thanks in advance!
First of all you need to import the Button element from react-bootstrap. You can write something like this:
import Button from 'react-bootstrap/Button'
After that, you can remove the className attribute because React Bootstrap builds the component classNames in a consistent way that you can rely on. You can base your styles on the variant attribute, so try something like this:
Home.js
import React from "react";
import Button from 'react-bootstrap/Button'
import '../App.css'; // Reflects the directory structure
export default function Home() {
return (
<div>
<h2>Home</h2>
<Button variant="light">TEXT</Button>
</div>
)
}
App.css
.btn-light {
margin: 10;
overflow-wrap: break-word;
color: red;
}
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
In my project, I am using custom svg files as part of the requirement.
I am using material-ui#3.9.3 to achieve this.
I looked at the example that is available on the official documentation -> https://material-ui.com/style/icons/#svg-icons
However, in my version, the custom icons do not appear the same way.
My forked version is available at https://codesandbox.io/s/mqnq9qrqn8
What I am looking for is a way to use the custom icons that can work well with Material-UI's <Icon> Component.
Could someone please help me with this?
Thank you
You can also use the Material-UI IconButton component and wrap it around your svg img as shown below
import React from 'react'
import { Icon } from "#material-ui/core";
import YourLogo from './yourlogo.svg'
export const Logo = () => (
<Icon>
<img src={YourLogo} height={25} width={25}/>
</Icon>
)
You can import the svg file as a React Component and then use it directly inside an SvgIcon Component from Material UI.
This will also allow you to style your component.
import React from 'react';
import { SvgIcon, makeStyles } from '#material-ui/core';
import { ReactComponent as MySvg } from './img/someSvgFile.svg';
const useStyles = makeStyles(theme => {
mySvgStyle:{
fillColor: theme.palette.primary.main
}
})
function MySvgIcon() {
classes = useStyles();
return(
<SvgIcon className={classes.mySvgStyle}>
<MySvg/>
</SvgIcon>
)
}
The answer lies in the viewBox attribute ( MDN )
When you are messing with SVGs, especially copy/pasted ones, you have to finesse the viewBox to frame your paths correctly. I usually start with <svg viewBox="0 0 100 100" /> and scale up or down, to taste. After some fiddling, "0 0 60 50" looks pretty good (link).
Looking at the MaterialUI docs (link), they planned for this sort of thing and allow it as a prop on the component.
just put an <img/> inside your <Icon/> or any other widgets...
import { Icon } from "#material-ui/core"
import YourImage from './yourImage.png'
export const YourComponent = () => (
<Icon>
<img src={YourImage}/>
</Icon>
)
Not really a problem but something I’m not happy with. I'm using react + typescript + css modules + https://material-ui-next.com/. Problem is that when I need to style material ui components I have to use !important a lot. Question is if there is a way to create styles without important. I create a sample project to reproduce the problem https://github.com/halkar/test-css-modules
material-ui exposes many of their components for styling. There two ways to go about doing this.
Apply styles globally
You could style the components globally and apply it to the theme. An example of this would be something like this (copied from the docs http://www.material-ui.com/#/customization/themes):
import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
// This replaces the textColor value on the palette
// and then update the keys for each component that depends on it.
// More on Colors: http://www.material-ui.com/#/customization/colors
const muiTheme = getMuiTheme({
palette: {
textColor: cyan500,
},
appBar: {
height: 50,
},
});
class Main extends React.Component {
render() {
// MuiThemeProvider takes the theme as a property and passed it down the hierarchy
// using React's context feature.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar title="My AppBar" />
</MuiThemeProvider>
);
}
}
export default Main;
As you can see in here, appBar component have a height of 50px meaning that every time you add an appbar component to your app down the tree where you applied the muiTheme, it will give it a height of 50px. This is a list of all the styles you can apply for each component https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js.
Apply styles using style attribute
To apply the styles to individual components, you can usually use the style property and pass it the styles you want.
This is another example from the docs where a margin of 12px is applied to a RaisedButton.
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
margin: 12,
};
const RaisedButtonExampleSimple = () => (
<div>
<RaisedButton label="Default" style={style} />
<RaisedButton label="Primary" primary={true} style={style} />
<RaisedButton label="Secondary" secondary={true} style={style} />
<RaisedButton label="Disabled" disabled={true} style={style} />
<br />
<br />
<RaisedButton label="Full width" fullWidth={true} />
</div>
);
export default RaisedButtonExampleSimple;
Now, the styles are defined in the same file but you could define them in a separate file and import them to the file where you are using the components.
If you want to apply multiple styles then you can use the spread operator like so: style={{...style1,...style2}}.
Usually, you are styling a specific thing in the component (root element) with the style property but some components have more than one property to style different elements of the component. Under properties in this page http://www.material-ui.com/#/components/raised-button, you can see that there are style property, labelStyle and rippleStyle to style different parts of RaisedButton.
Check the properties under the component that you are using and see which style property you could use, otherwise check the available global style properties you could override. Hope this helps!
I should've used JssProvider and tell it to put material UI styles before mine in the page head section.
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
jss.options.insertionPoint = document.getElementById('jss-insertion-point');
function App() {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
you have to use the component API's. You can't set style to the components imported from libraries just with css if the component has API's to get style.
*Update
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
},
label: {
textTransform: 'capitalize',
},
};
function Classes(props) {
return (
<Button
classes={{
root: props.classes.root, // class name, e.g. `classes-root-x`
label: props.classes.label, // class name, e.g. `classes-label-x`
}}
>
{props.children ? props.children : 'classes'}
</Button>
);
}
Classes.propTypes = {
children: PropTypes.node,
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Classes);