I import the styles to the component like below. Up: It's a React component with a postcss-loader in Webpack.
import styles from './index.scss';
This is a gist from the component:
<div className={styles['container']}>
<Row type='flex' align='middle' justify='space-between'>
<Col span={24}>
... ...
</Col>
</Row>
</div>
This is the styles:
.container {
margin-left: 24px;
& .ant-row-flex.ant-row-flex-space-between.ant-row-flex-middle {
height: 100%;
display: flex;
& .ant-col-24 {
display: flex;
align-items: center;
}
}
}
Only the .container's margin-left: 24px; gets displayed in the component.
How to get .ant-row-flex.ant-row-flex-space-between.ant-row-flex-middle from Row and .ant-col-24 from Col to display too?
Related
I have a simple lightbox component that uses a material-ui modal and has a style sheet. The component and the css look like this.
Lightbox.tsx
import { Modal } from '#material-ui/core';
import { CloseOutlined } from '#material-ui/icons';
import styles from './Lightbox.module.css';
export default function Lightbox(props: any) {
return (
<Modal
className={styles.modal}
open={props.open}
onClose={props.handleClose}
>
<div className={styles.imageContainer}>
<div className={styles.imageToolbar}>
<CloseOutlined
aria-aria-label={props.closeButtonMessage}
className={styles.toolbarButton}
data-cy="lightbox-close"
fontSize="inherit"
onClick={props.handleClose}
role="button"
/>
</div>
<img src={props.url} className={styles.image} title={props.name} />
</div>
</Modal>
);
}
Lightbox.module.css
.modal {
z-index: 2147483640 !important;
}
.imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image {
max-width: 90%;
max-height: 90%;
}
.imageToolbar {
right: 10px;
top: 10px;
position: absolute;
width: 100%;
font-size: 40px;
}
.toolbarButton {
color: #cccc;
cursor: pointer;
float: right;
}
.toolbarButton:hover {
color: #ffff;
}
The component is rendered inside another component like so:
<Lightbox
closeButtonMessage={formatMessage(closeMessageDescriptor)}
url={url}
name={name}
handleOpen={handleOpen}
handleClose={handleClose}
open={open}
/>
When the application is run, the class names are present on the elements however, the styles are missing.
Elements in debugger console: Rendered elements
Rendered CSS for the elements: Style not rendering for the class
What am I doing wrong?
Please note that I need to use CSS style sheet as mentioned in my example and not inline CSS styles.
Since I am new to react, I have tried looking at other components in the project I am currently working on. This method of using CSS style works for other components. Since I am new to React, any help is appreciated.
I have a two basic div containers and I am trying to apply some styles to it. I do import my CSS styles from a separate .module.css file and the first style gets picked up in the className property, when assigned. However, the same thing is not working for the second div. The css property for class 'sales' is not being picked up
dashboard.js
import HomeSalesmanStyles from '../../../styles/SalesmanHome.module.css';
const HomeSalesman = ({name}) => {
return(
<>
<div className={HomeSalesmanStyles.container}>
<h4>
Hello, {name} 👋
</h4>
</div>
<div className={HomeSalesmanStyles.sales}>
Hello
</div>
</>
)
};
export default HomeSalesman;
SalesmanHome.module.css
.container {
display: flex;
justify-content: center;
margin-top: 5%;
};
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
Any ideas where the issue is?
----------- Edit ------------
The issue was wrong css module name import! After correcting to the right file, everything works.
This looks like a syntax error in the CSS: adding a semicolon after a rule is invalid.
.container {
display: flex;
justify-content: center;
margin-top: 5%;
} /* <- no semicolon */
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
<div class="container">
<h4>
Hello, {name} 👋
</h4>
</div>
<div class="sales">
Hello
</div>
Lets say in my global.css file of a Next.js project I have:
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
I also have a Layout.js component and a Layout.module.css file. The component looks like this:
import styles from "../styles/Layout.module.css";
const Layout = ({ children }) => {
return (
<div>
<div className={styles.navbar}>
<div className="flex">
<h1>Structured Safety</h1>
<nav>
<ul>
<li> Home </li>
<li> Demo </li>
</ul>
</nav>
</div>
</div>
</div>
);
};
export default Layout;
and the Layout.module.css is:
/* Navbar */
.navbar {
background-color: var(--primary-color);
color: #fff;
height: 70px;
}
.navbar ul {
display: flex;
}
.navbar .flex {
justify-content: space-between;
}
Structured like this, my .navbar .flex does not overwrite the global .flex class and split the h1 from the nav. How can I accomplish overwriting my global style from this component style?
Since .flex refers to a global class you'll need to use the :global selector to target it in your CSS module.
/* Layout.module.css */
.navbar :global(.flex) {
justify-content: space-between;
}
Or using an alternate syntax.
.navbar {
:global {
.flex {
justify-content: space-between;
}
}
}
/** CSS MODULE FILE **/
.classname :global(.globalClass) { css properties }
.classname {
:global {
.globalClass { css properties }
}
}
In NextJS and React when you
import styles from "__.css" the styles becomes a variable so you have to use it in your HTML for it to take effect.
Currently you're not using any styles from your Layout.module.css, if you want to use that css you would change your html to: <div className={styles.navbar}> and such..
So I was designing a web app using React and I'm stuck on this issue. Given below is what is being rendered
As I've highlighted using the red rectangle, there is a cut off region in my footer component. I'm not sure what is causing this. The CSS and Component code is as given below
import styled from 'styled-components';
export const Background = styled.section`
background: black`;
export const Column = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 50px;
margin-top: 50px;`;
export const Row = styled.div`
display: flex;
flex-direction: row;
justify-content: center;`;
export const Text = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
Footer Component
import React from 'react';
import { Column, Row, Background, Text } from './FooterStyles';
function Footer(props) {
return (
<div>
<Background>
<Row>
<Column>
<Text><h1>Developed By</h1></Text>
<h3>Erwin Smith</h3>
<h3>Peter Jackson</h3>
<h3>Tommy</h3>
</Column>
<Column>
<h1>About US</h1>
</Column>
</Row>
</Background>
</div>
)
}
export default Footer;
A solution to work around this issue is much appreciated.
If you r using bootstrap try creating a custom class with margin-left,right -15px n overflow-x: hidden to body
The defaults properties and values for a body tag are:
body { display : block; margin : 8px; }
so I think you should set that margin to 0.
this is just my guess because you haven't provided so much information and this is all I can say.
I am using ReactJS create-react-app to build a website. I'm trying to center an image on my homepage horizontally across the screen using css, but it is remaining aligned left.
I have the .jpg being imported into a .js file with a class declaration and it appears on the page but it doesn't follow the class modifications I am making in my index.css file.
//in Cur.js file
import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image
img src={cur} alt="cur" class="center"
height={350}
width={700}
/>
</div>
);
}
export default Cur;
//in index.css file
.center{
text-align: center;
display: block;
justify-content: center;
align-items: center;
margin: auto;
width: 100%;
}
<Image
img src={cur} alt="cur"
height={350}
width={700}
style={{ alignSelf: 'center' }}
/>
You may separate the inline style, or use styled-components instead
Set a class name for the div eg. className="container-div"
And style it in your css style sheet.
.container-div{
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
The height and width properties will ensure your container covers the whole screen .
try this.. the property is called className not class
import React from 'react';
import Image from 'react-image-resizer';
import from "index.css"
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image
img src={cur} alt="cur" class="center"
height={350}
width={700}
/>
</div>
);
}
export default Cur;
html:
<div className="image-container">
<img src={logo} alt="logo"/>
</div>
css file:
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
React uses className instead of class.
Change
img src={cur} alt="cur" class="center"
to
img src={cur} alt="cur" className="center"
my problem was missing display: flex in my css styles. adding it to the rest of styles, solved my problem.
In parent div css add:
.parent {
display: flex;
justify-content: center;
}
This will center your image.
import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image src={cur} alt="cur" className="center"/>
</div>
);
}
export default Cur;
body,html{
height:100%,
min-height:100%
}
.center{
text-align:center;//for texts
height:100%;
display:flex;
align-items:center;
justify-content:center;
}