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="" />
Related
So I’m trying to import 2 images in this code. They are located in the same folder as the .tsx file
import * as React from 'react'
import './index.css';
import image from './image.jpg';
import image2 from './image2.jpg';
export default function Sl2() {
return (
<div>
<h1
Introduzione
</h1>
<p>
Lorem ipsum
</p>
<img src={image} style={{ width: '200%', height: '200%', transform: 'translate(110%, 0%)' }} />
</div>
)
}
Now if I edit src={image} with src={image2} it doesn’t work, even if both of the images are in the same folder. The error giving is “module not found”. It seems to only work with image and not image2. I also tried editing the “image.jpg” name to something else, and then I also changed it in the code, but everything seems to work ONLY if the image imported has the name “image”
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.
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';
I am using Awesome-Slider-React to build a small web-app. I am facing an issue in styling my content. Awesome-Slider gives default styling to all the div defined inside <AwesomeSlider> which reduces the div you have access to very small size as seen here. I want to be able to place my components in the full screen. I tried overriding the class awssld__content but this only works if I supply !important in App.css. What is the best way for me to have access to the div which spans the whole viewport.
JSX
<AwesomeSlider cssModule={AwesomeSliderStyles}>
<div className = "main" style = {{ backgroundColor: "white" }}> <About/></div>
<div className = "main" style = {{ backgroundColor: "white"}} >
<BarChart
data={data}
title={"check"}
color="#70CAD1"
/>
<LineChart
data={data1}
title={"check"}
color="#70CAD1"
/>
</div>
<div>
<Col lg="8" md="12" sm="12" className="mb-4">
<UsersOverview />
</Col>
</div>
</AwesomeSlider>
App.css
.main {
display: grid;
justify-content: left;
}
.awssld__content {
align-items: left ;
justify-content: left !important;
}
SCSS file from Awesome-Slider. The complete code for the SCSS file can be seen here.
&__content {
#extend %fill-parent;
background-color: var(--content-background-color);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
> img,
> video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
&--enter {
// On content enter
}
&--exit {
// On content exit
}
}
I had the same challenge.
One way is to refer to the .scss (SASS) stylesheet instead of the .css in the /dist folder. The latest is the uglified build version of the SASS stylesheets.
//import 'react-awesome-slider/dist/styles.css';
import 'react-awesome-slider/src/styles.js';
You also need to configure a sass-loader in your React app (install node-sass and sass-loader).
The downside of this, I guess, is that the SASS file gets tranpsiled reel-time. This probably costs performance ... so not sure if this is the best practise for production.
It should also be possible to transpile the customized SASS file, so the /DIST version will be updated. I tried this myself, but didn't manage to get this to work. Maybe someone knows how to do this?
One last thing: I use webpack for building and loading my react app. There was an error due to a conflict in the versions of webpack (4.41.5) and sass-loader (8.x). The error was TypeError: this.getResolve .... The fix I found was downgrading sass-loader to 7.3.1.
Good luck
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.