Global.scss
/src/styles/global/Global.scss
.grid {
display: grid;
}
Meta.js
/src/components/Meta.js
This file contains the import statements for the .scss file
import "../styles/global/Global.scss";
index.js
/src/pages/index.js
This file contains the import statement for the component import Meta from '../components/Meta';
Followed by
function Home() {
return (
<div className="container">
<Meta />
<Header />
<p>Hello world!</p>
<Footer />
</div>
)
}
export default Home;
Footer.js
/src/components/Footer.js
class Footer extends React.Component {
render() {
return (
<footer className="container grid">
<div className="footer-primary-nav">
<p>Primary Nav</p>
</div>
</footer>
);
}
}
export default Footer;
The class .grid isn't being loaded into the Footer.js from the Global.scss file.
On paper, I thought this would be working, but the .grid styling isn't being loaded on the page.Any help would be greatly appreciated!
It turns out the server just needed to be reset / turned off. Looked at yesterday and it was working as expected.
Related
How would I write and call this CSS in React CSS Modules?
.is-invalid~.validationError {
display: inline !important;
}
Calling styles.validationError does not work.
return (
<>
<div className={styles['is-invalid']}>
</div>
{/* some Node or nothing, is-invalid and validationError are brothers. */}
<div className={styles.validationError}>123</div>
</>
)
When i run locally (even with yarn start in prod mode), my translations work correctly. However, after i deploy my project to AWS Amplify, this specific /dashboard page is not working the translations (no error messages at all in console.log, nothing).
I have the following structure:
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { UserHome } from '~/templates'
export default function Dashboard() {
return <UserHome />
}
export async function getServerSideProps({ locale }: { locale: string }) {
const res = await serverSideTranslations(locale, ['common'])
return {
props: {
...res
}
}
}
This leads to UserHome template. Now the following:
import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { PageHeader, TableCampaign } from '~/components'
import { tableData } from '~/components/TableCampaign/mock'
import Base from '../Base'
import styles from './user-home.module.css'
const UserHome = () => {
const { t } = useTranslation('common')
return (
<Base>
<PageHeader image="/img/computer.svg" title={t('tableCampaign.title')}>
<div className={styles.header__legends}>
<div className={styles.header__infos}>
<div className={styles.header__legend}>
<div
className={`${styles.header__circle} ${styles.header__circle__success}`}
></div>
<p className={styles.header__state}>
{t('tableCampaign.active')}
</p>
</div>
<div className={`${styles.header__legend} mt-2`}>
<Image
src="/icon/eye.svg"
alt="Eye icon"
className="mr-2"
width={24}
height={24}
/>
<p className={styles.header__state}>{t('tableCampaign.view')}</p>
</div>
</div>
<div className={`${styles.header__infos} mx-6`}>
<div className={styles.header__legend}>
<div
className={`${styles.header__circle} ${styles.header__circle__warning}`}
></div>
<p className={styles.header__state}>
{t('tableCampaign.pending')}
</p>
</div>
<div className={`${styles.header__legend} mt-2`}>
<Image
src="/icon/edit.svg"
alt="Pen icon"
className="mr-2"
width={24}
height={24}
/>
<p className={styles.header__state}>{t('tableCampaign.edit')}</p>
</div>
</div>
<div className={styles.header__infos}>
<div className={styles.header__legend}>
<div
className={`${styles.header__circle} ${styles.header__circle__danger}`}
></div>
<p className={styles.header__state}>
{t('tableCampaign.finished')}
</p>
</div>
<div className={`${styles.header__legend} mt-2`}>
<Image
src="/icon/download.svg"
alt="Download icon"
className="mr-2"
width={24}
height={24}
/>
<p className={styles.header__state}>
{t('tableCampaign.download')}
</p>
</div>
</div>
</div>
</PageHeader>
<TableCampaign tableList={tableData} />
</Base>
)
}
export default UserHome
The translations of UserHome and Base component, and the components inside Base are not working. The other pages are working correctly. Do you guys have any idea?
I have a very simple div in my footer:
import React from "react";
import { useHistory } from "react-router-dom";
import style from "./DesktopFooter.module.css";
const DesktopFooter = () => {
const history = useHistory();
return (
<div className={style.container}>
<div className={style.footerNav} id="phoneNumber">
999-999-9999
</div>
<div className={style.footerNav}>
</div>
<div className={style.footerNav}></div>
</div>
);
};
export default DesktopFooter;
In my CSS I want to style both on the class and id:
.footerNav {
width: 50%;
display: flex;
}
#phoneNumber {
font-size: 2rem;
}
However my component is not recognizing the id styling I try to apply.
Could anyone point me in the right direction.
Ya, After you update a question, I found the issue, you are try to load style for id as normal Dom, but its will not work since you are not include css file as is, you are import style file to style param...
so, what you need to do is replace id="PhoneNumber" to this
<div className={styles["footerNav"]} id={styles["phoneNumber"]}>
999-999-9999
</div>
Check the demo url
Full Code:
import React from "react";
import style from "./MyComponent.module.css";
export default function App() {
return (
<div className={style.container}>
<div className={style["footerNav"]} id={style["phoneNumber"]}>
999-999-9999
</div>
<div className={style.footerNav}></div>
<div className={style.footerNav}></div>
</div>
);
}
I would suggest having it as either a class or an id. Classes usually have a higher priority, meaning that the id will be ignored.
This is what it should look like:
.phoneNumber {
font-size: 2rem;
width: 50%;
display: flex;
}
<div class = "phoneNumber">999-999-9999</div>
However, if you would like to get around this, I would use another element within the div, such as:
#myID{
font-size: 2rem;
}
.phoneNumber {
width: 50%;
display: flex;
}
<div class = "phoneNumber">
<p id="myID"> 999-999-999 </p>
</div>
Ok I found a solution, or at least a work around. The problem seems to be that the file was a css module and not just a css file.
I changed the name of the css file from DesktopFooter.module.css to DesktopFooter.css
and I changed my import statement from
import style from "./DesktopFooter.module.css" to import "./DesktopFooter.css
I am new to react, I have an issue on how to maintain stylesheets in react.
For Eg: If I have box structures in different components with the same class names which are import to Page-A & Page-B, I maintained different stylesheets & appended those to their respective pages. If I change the style properties for Page-B in respective stylesheet using the same class name, changes are reflecting in both the Page-A & Page-B pages, which is suppose to reflect in Page-B only. Please help to solve this.
Page-A<div class="wrapper">Headline<div>.wrapper{background:red; width:200px; height:200px;}
Page-B<div class="wrapper">Headline<div>.wrapper{background:black; width:400px; height:400px;}
import React, { Component } from 'react';
import NavbarafterLogin from './NavigationBar/navbarafterlogin';
import '../../Css/afterlogins.css';
class Home extends Component {
render() {
return (
<div class="col-sm-12 col-xs-12">
<NavbarafterLogin/>
<div class="body-wrapper">
<div class="container">
<ViewProfile/>
</div>
</div>
</div>
)
}
}
export default Home;
import React, { Component } from 'react'
import NavbarBeforeLogin from './NavigationBar/navbarbeforelogin';
import '../../Css/beforelogins.css';
class Index extends Component {
render() {
return (
<div class="col-sm-12 col-xs-12">
<NavbarBeforeLogin />
<div class="body-wrapper clearfix">
<div class="col-sm-12 col-xs-12">
<div class="banner-sec">
<div class="jumbotron">
<div class="container">
<h1>Submit <strong>Profile</strong></h1>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Index;
I was using react.js to build a template website.
When I build the first component, I met the problem.
the problem:
the picture is not in the middle of the page(I mean in vertical and in horizontal)
I have already use CSS flex to make it in the middle.
Why my picture's position is not in the middle of the page?
Just put that picture in that circle.
How to do that?
Here is my Center.js:
import React from 'react';
import image from './images/5.png'
import './Center.css';
const Center = () =>{
return(
<div id="center2">
<img id="center" alt="center" src={image}/>
</div>
);
}
export default Center
my app.js:
import React, { Component } from 'react';
import Center from './Components/Center';
class App extends Component {
render() {
return (
<div>
<Center/>
</div>
);
}
}
export default App;
my center.css:
#center2{
text-align:center;
}
#center{
width:300px;
height:300px;
}
my webpage on localhost 3000
If they are static you need to import it:
import image from './images/5.png'
return (
<div id='center'>
<img src={image} />
</div>
)
otherwise you need to move images folder to public directory, and access it by
<div id='center'>
<img src='./images/5.png' />
</div>
And this is the CSS to make that image on center:
#center2 {
display: flex;
justify-content: center;
align-items: center;
}