Styling Data React - javascript

I am new to React and having some trouble here- I am trying to use Sass to style a component in React. For some reason it isn't working. I am getting an error that 'styles' is defined but never used I'm not sure why this is happening as my other components are working fine. Probably something to do with the function around the jsx? I am getting an error 'styles' is defined but never used Any help is greatly appreciated!
Covers.js
import React from 'react';
import { videos } from '../../data/videos.json';
import styles from './covers.module.sass';
export const Covers = () => (
<div className="cover-container">
{videos.map((data, key) => {
return (
<Cover
key={key}
cover={data.cover}
title={data.title}
subtitle={data.subtitle}
description={data.description}
/>
);
})}
</div>
);
const Cover = ({title, subtitle, description, cover}) => {
return (
<div>
<img src={cover} className="cover-image" />
<h1 className="cover-title">{title}</h1>
<h2 className="cover-subtitle">{subtitle}</h2>
<p className="cover-description">{description}</p>
</div>
);
};
export default Covers;
covers.module.sass
.cover-container
text-align: center
color: white
.cover-image
width: 200px
height: 200px
object-fit: cover
.cover-title
font-size: 7em
.cover-subtitle
font-size: 4em
.cover-description
font-size: 2em

you are using CSS Modules but not using properly. CSS Modules allows you to scope locally your css, given an unique identifier to the classes for given scope. This avoids name collisions, a problem that can occur given the global scope nature in CSS.
but for that work properly at your file after importing the style as you do:
import styles from './covers.module.sass';
you need to use that styles object imported at your className declaration, rather than passing a string name like you do. Since you are not applying styles anywhere you get this error warning. You should pass to className style with the corresponding desired class.
therefore, the correct way to apply styles would be:
<div>
<img src={cover} className={styles.cover-image} />
<h1 className={styles.cover-title}>{title}</h1>
<h2 className={styles.cover-subtitle}>{subtitle}</h2>
<p className={styles.cover-description}>{description}</p>
</div>
as you do that your error is fixed, your styles work as expected, and at the browser you'll have unique classes generated which ensures that will not face any class name collision.

You can not use className like this <img src={cover} className="cover-image" />
correct would be <img src={cover} className={styles.cover-image} />
or
you can import sass file like this import './covers.module.sass'; and use className like this <img src={cover} className="cover-image" />
ref: https://www.w3schools.com/react/react_sass.asp

just replace the
import styles from './covers.module.sass';
with
import './covers.module.sass';

Related

My q-btn elements are not rendering appropriately in Quasar

I am new to Quasar and I don't know why, but my q-btn component buttons render as white backgrounds sometimes, ignoring the background-color I added to them, using external stylesheets.
The following are examples of this baffling problem
The above button should look like below
Another example is
The above one should look like
The buttons render properly some times, but just like that, without any clear pattern, they render with the white backgrounds.
It was suggested that the reason this was happening is because the buttons are being rendered before the external scss files are parsed. I changed the style of importing external scss files from
<template>
...
</template>
<script>
import './_custom-style.scss // initial import style
...
</script>
to
<template>
...
</template>
<script>
...
</script>
<style lang="scss" src="./_custom-style.scss"></style> // new css import style
This didn't work.
It was suggested that I use q-btn's color prop, (which is less than ideal, because I won't be able to use a custom hex color for my background), however I tried adding the color prop to it, using one of quasar's colors (in the color palette) and it still isn't rendering appropriately all the time. I don't know what else to do.
EDIT:
These are the scss file and one of the templates that use the q-btn component.
airtime {
...
&__redeem-btn {
margin-top: 1rem;
width: 80%;
padding: .5rem;
background-color: $purple-dark-3;
color: $primary-white;
font-size: 1.7rem;
}
}
<template>
<div class="airtime text-center">
<h1 class="..">Congratulations!</h1>
<p class="..">You got <strong>7</strong> questions correct</p>
<q-img
src="icons/...svg"
transition="fade"
class=".."
alt=".."
/>
<p class=".."></p>
<q-btn
class="airtime__redeem-btn"
rounded
label="Redeem"
no-caps
#click="$emit('selectNetworkProvider')"
/>
</div>
</template>
I have discovered the error. It turns out that there was a clashing style in my application
.q-btn__wrapper {
background-color: $primary-white;
}
This style overrode the background-color of the q-btn components.

React CSS inline vs CSS external styling

I am have been seeing that some things do not work the same in react CSS inline styling vs CSS external sheet styling. I was having an issue with adding a background image to my react app. I could not get it to compile via the normal CSS way. It seemed that it could not resolve.
I ended up using an inline style approach that worked. I am not sure if this is the most efficient way to add background images.
What is the best way to add background images to react, inline or external.
Working code:
App.js
import './App.css';
import PorfileCard from './PorfileCard';
function App() {
const mystyle = {
backgroundImage: "url(/images/bg-pattern-top.svg)",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}
return (
<div style={ mystyle }>
<PorfileCard/>
</div>
);
}
export default App;
None working Code via external CSS
App.css
body {
margin: 0;
font-family: var(--fontFamily);
font-size: var(--fontSize);
background-color: (var(--darkCyan));
background-image: url("images/bg-pattern-top.svg");
}
I have tried with the leading forward slash and removing the quotes. I get the same error.
Put your images folder in the 'public' directory as mentioned in the comments and to reach these images, uses:
process.env.PUBLIC_URL
examples :
<div style={{ background: `url(${process.env.PUBLIC_URL)/images/bg-pattern-top.svg` }}>
</div>
<img src={process.env.PUBLIC_URL + /images/bg-pattern-top.svg} alt="" />

passing props as classNames in next.js

I am trying to have the header of each of my app's pages change color based on the current page. How I am trying to achieve this:
<Header className="headerBitcoin"></Header>
What I want is the be able to have the header component present on all 4 pages, and then just change the className to another prop to change the background but not anything else.
And the header component itself
import styles from "../../styles/Home.module.css";
export default function Header(props) {
return (
<div >
<div className={props.className}>aaaaa</div>
<div className={styles.row}>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
</div>{" "}
</div>
);
}
At the moment the styles for the tabs and row are working but the header is not getting its style applied.
I checked the console and found the header is getting the className headerBitcoin passed to it, however the row beneath it has the className of "Home_row__88lPM"
This is my first time working with next.js, and I know I am doing something wrong because this works in React. Any help would be appreciated.
don't do this:
<div className={props.className}>aaaaa</div>
try this instead:
<div className={styles[props.className]}>aaaaa</div>
I think this should works
I assume it's not being applied because you have the headerBitcoin styles defined in your CSS module.
If you want to apply a class that way (className="headerBitcoin"), you need to define the class in your global CSS instead.
If you meant to use the headerBitcoin defined in Home.module.css, then you'll want to change the className to use the scoped styles.
import styles from "../../styles/Home.module.css";
export default function Header(props) {
return (
<div >
<div className={styles[props.className]}>aaaaa</div>
// ...
</div>
);
}

Creating Styled component with multiple elements

I am dabbling with Styled components, and was trying to create a "dumb" component which has multiple html tags in it. Something like:
<div className="component-container">
Link text
<p className="para">Some Text</p>
</div>
Is there a way to wrap above html in one single styled component? I read the documentation, and I only see examples of single html element based components like this:
const Container = styled.div`
display: flex;
justify-content: space-between;
.para {
font-size: 15px;
}
`;
I know I can do:
<Container>
Link text
<p className="para">Some Text</p>
</Container>
But that won't be optimal. I would rather create a normal React functional component instead, which can wrap all the markup in one single component which I can import anywhere and use in a single line.
The way you would code something like this is make it a functional component like you are saying.
const YourComponent = () => (
<Container>
Link text
<p className="para">Some Text</p>
</Container>
);
Styled-components only style elements, but the Container styled-component can be re-used of course.

Css classname not applied to react component

I appreciate your time and help. I spent hours trying to figure this out can't seem to get to the bottom of it.
I have this react component:
import styles from './style.scss';
class ButtonComponent extends React.Component {
render() {
return (
<div className={styles.bunny}>
hello world
</div>
);
}
}
and scss file:
.bunny {
display: block;
margin-top:50px;
margin-bottom:55px;
background-color: blue;
}
When I load up my html, the div has no classname when I expect it to be <div class="bunny">
When I put the class name in the react component literally like this:
<div className="bunny">
then I can see the className in the browser.
What am I doing wrong?
Thank you so much in advance.
Firstly, you need to guarantee it's defined with: console.log(styles)
Im' not sure you import style.scss correctly.
You need to import your scss like...
import './styles.scss';
Webpack will take care of bundling your styles so you can add the className as a string on your component.
<div className="bunny">Hello World</div>
What fixed this for me was to change the name of my scss file from style.scss to style.module.scss
For me it's because I use commonjs's require to load an es module.

Categories