I'm new to React and I seem to have a problem with CSS loading. I tried to import it according to the tutorial, but that doesn't seem to be a good way to do it now, because the tutorial is a bit older. Here's my code, I hope someone can help.
Why isn't my CSS loading? What should I do?
Layout.js:
import React from "react";
import Aux from "../../hoc/Auxx";
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;
Layout.css
.Content{
margin-top: 60px;
}
just import it normally
import './Layout.css'
and use the classes like you do in a normal css
const layout = (props) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main className={"Content"}>{props.children}</main>
</Aux>
);
Related
My problem is the following, I created a new react project with typescript. And added a custom component that has a separate css file for it's styling. The folder structure is like this:
In the Header.css I defined a class:
.mainHeading {
color: green;
}
And referenced it in the Header.tsx like this:
import React from "react";
import styles from './Header.css';
function Header() {
return(
<h1 className={styles.mainHeading}>Streamfiuse</h1>
);
}
export default Header;
To do this I added the following to the react-app-env.d.ts
declare module '*.css';
I'm using the Header component in the App.tsx like the following
import React from 'react';
import Discover from './components/discover/Discover';
import Header from "./components/header/Header";
import './App.css';
function App() {
return (
<div className="App">
<Header />
<Discover />
</div>
);
}
export default App;
The problem is now that I would expect the heading "Streamfiuse" to appear in green, but apparently it doesn't. I'm new to react so any help is appreciated.
Edit 1
I also tried this:
import React from "react";
import './Header.css';
function Header() {
return(
<h1 className="mainHeading">Streamfiuse</h1>
);
}
export default Header;
But does't work either.
Try importing like this:
import './Header.css'
And applying the mainHeading class as a string
Maybe you could try this
Change import styles from './Header.css'; into import './Header.css';
Change className={styles.mainHeading} into className="mainHeading"
import React from "react";
import './Header.css';
function Header() {
return(
<h1 className="mainHeading">Streamfiuse</h1>
);
}
export default Header;
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'm trying to add css to my newly created component. When I use inline styles it works. But when I try to import css from another separate file it doesn't work. Below I mention my 2 files.
Layouts.css
.Content {
margin-top: 16px;
}
Layouts.js
import React from 'react';
import Auxillary from './../../hoc/Auxillary'
import classes from './Layouts.css'
const Layout = (props) => (
<Auxillary>
<div>
Toolbar,Sidebar,Backdrop
</div>
<main className={classes.Content}>
{props.children}
</main>
</Auxillary>
);
export default Layout;
Have you tried making className='Content'
If you want to use classes.Content you must name your Layout css file like this
Layouts.module.css
Good day, im attempting to add custom CSS to a material UI App Bar but all the styles i apply using the makeStyles function is overridden by the default Material UI styling. The only fix is to apply !important to my styling but I dont see this as a viable workaround. Following the docs it states to use the StylesProvider component to configure the CSS injection order but this also hasnt proven any results. Please any help will be greatly appreciated here is an example of what ive attempted to do.
Index.js
import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import 'typeface-roboto';
import { StylesProvider } from '#material-ui/core/styles';
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
hydrate(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
} else {
render(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
}
serviceWorker.unregister();
Component that uses MakeStyles
const navBarStyles = makeStyles((theme) => ({
link: {
margin: theme.spacing(1, 1.5)
}
}));
export default function NavbarComponent() {
const classes = navBarStyles();
return (
<AppBar position="static" elevation={0}>
<Toolbar className="flex-wrap">
<Typography variant="h6" color="inherit" noWrap className="flex-grow-1">
test
</Typography>
<nav>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Features
</Link>
</nav>
</ToolBar>
</AppBar>
)}
Note im using React-Snap with this project so im not sure if that is the reason it is breaking, https://www.npmjs.com/package/react-snap
You can override the MUI styles using theme provider
check theme provider
Or can use classes property in Mui Component. classes
Use sx={{}} property directly in the navbar.
Something like this
<AppBar position='static' sx={{ borderRadius: '9px', color="inherit" }}>
//Other components
</AppBar>
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>
)