This is the css file named Layout.css :
.Content {
margin-top: 16px;
color : red;
}
and this is the component named Layout.js :
import React from 'react';
import classes from './Layout.css';
// const Fragment = React.Fragment;
const { Fragment } = React;
const Layout = (props) => {
return (
<Fragment>
<div> toolbar , sidedrawer , backdrop </div>
<main className={classes.Content}>{props.children}</main>
</Fragment>
);
};
export default Layout;
and the problem is the css doesnt apply to component, i have this problem in my several components.
You have to import your css file like this :
import './Layout.css';
and then use the class like this :
<main className="Content">{props.children}</main>
Related
I am trying to use #emotion/styled. But, I cannot get the components to render on the screen, whereas if I am using the HTML element it is working fine.
import styled from "#emotion/styled";
export const Button = styled.button`
color: red;
background-color: green;
`;
import { Button } from "../styles/Button";
const Test = () => {
return (
<div>
<Button>Hello</Button>
</div>
);
};
export default Test;
Does anyone has any idea where things are going wrong?
It is working in my sandbox here
sandbox
import "./styles.css";
import styled from "#emotion/styled";
const Button = styled.button`
color: red;
background-color: green;
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button>Hello</Button>
</div>
);
}
try to import this on top of your component where you use emotion css.
This fixed my problems with not loading emotion css. Cheers!
/** #jsxImportSource #emotion/react */
You can use styled with css function to make a new component by updating some styles of existing component.
import styled from "#emotion/styled";
import { css } from "#emotion/react";
import { Button as MUIButton } from "#mui/material";
export const Button = styled(MUIButton)(
css({
backgroundColor: "green",
color: "red",
})
);
I have added the following classes to elements as follows:
import Link from "next/link";
import React from "react";
const Page = () => {
return (
<div>
<h1 className="notes-header">Index Page</h1>
<Link href="./notes">
<a className="notes-home">Notes</a>
</Link>
</div>
);
};
export default Page;
Next, I added styling to my element as follows
.notes-header {
font-size: 100px;
}
.notes-home {
font-size: 28px;
}
Lastly, I created a _app.js file and imported the global css file as shown below:
import React from "react";
import "../styles/globals.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
The problem is my styles don't get applied to my selected elements. What I'm I getting wrong?
In my react component, I have imported CSS file from the CSS directory, but the CSS isn't being applied to the component.
This is my folder structure
This is my code on the homepage.jsx file
import React from 'react';
import './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
And this is the CSS file
.homepage-container {
background: red;
height: 100vh;
}
When I put the same CSS in the index.css file which is automatically created by the create-react-app, then the styling is visible.
What is the problem here? Am I missing something?
As far as I know you have to import styles to specific files in this way:
import React from 'react';
import styles from './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className={`${styles[homepage-container]}`}>
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
Notice that the [] brackets are only for multi-word scss classes. If your class would be just named homepage, then the proper way would be className={`${styles.homepage}`}
I don't see any problem in your code whatever you have posted.
for your reference
JSX
import React from "react";
import "./homepage-styles.scss";
export default function App() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
);
}
sass
.homepage-container {
background: red;
height: 100vh;
}
Live Demo
Make sure you have installed node-sass package.
I'm running into a classnames issue with sass modules in Preact:
// Card component
import { h, Component } from "preact";
import cx from "classnames";
import style from "./style";
export const Card = () => {
return (
<div class={style.card}>
<div class={cx(style.image, "image-item")} />
<div class={style.body} />
</div>
);
};
// in style.scss
.card {
.image-item {
margin-bottom: 23px;
}
}
The specified margin-bottom css does not get applied, any ideas?
I can't seem to style a PrimeReact component with styled-component.
Given the below code to render an InputText, my intention is to change the width of it. But it doesn't work.
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText/>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
styled-components generates a className that should be passed to the component.
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText className={this.props.className} /> <---- here
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
If InputText doesn't accept className, you can simply wrap it with another component:
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<div className={this.props.className}> <---- here
<InputText />
</div>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
PrimeReact has a lot of styles applied with a separate sass stylesheet, often combining multiple classnames and html tags.
To get your styles to win, you need more CSS specificity.
A solution is to use a nested selector, like:
const ComponentView = styled(Component)`
&&& {
width: 1000px;
}`
This will generate 3 identical classnames and is recommended by the Styled Components docs. More classname specificity needed? Use more &s.
Or you could put in a !important. I've seen this around.
Or edit their sass file.