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
Related
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
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/
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>
I'm trying to use AtlasKit with Next.js 8, but for some reason, there is a SyntaxError: Unexpected token export error when attempting to build.
I think it's an issue with #atlaskit/editor-core not being properly preprocessed for ES6 (via webpack or babel, etc), but I'm not sure. Any ideas?
//Home.tsx
import * as React from 'react';
import * as classnames from 'classnames';
import * as css from './Home.css';
import { Editor } from '#atlaskit/editor-core';
export const Home: React.FunctionComponent = props => (
<div className={classnames('test', css.home)}>
<Editor />
</div>
);
I've created a repo to replicate the issue here: https://github.com/brandontle/nextjs-with-atlaskit
The file that uses AtlasKit Editor is ~/src/components/Home.tsx.