Good evening.
I am facing an issue while using react in combination with styled components.
I have an image folder located in :
And I have my styled components in the following folder :
Inside the styled components I'm trying to import the image like this :
const FormImage = styled.div`
width: 150px;
height: 150px;
margin: 0 auto;
margin-top: -20%;
background-image: url(../../img/testlogo.png);
`;
Im sure this is the right path. But somehow the image is not showing in the browser.
This is what i'm seeing in my browser :
Such path is not available in runtime (as CSS-in-JS like styled-component creates the CSS in runtime, although there are solutions with no-runtime), you should try one of the next approaches:
import ImgSrc from '../../img/testlogo.png';
const FormImage = styled.div`
background-image: url(${ImgSrc});
`;
// or
const FormImage = styled.div`
background-image: url(${require(`../../img/testlogo.png`)});
`;
Related
I have created a elementStyles.js file where I am storing some styled-components to later use within my GatsbyJS site: import { Wrapper, PageContent } from "../components/StyledElements/elementStyles"
However, for some reason it keeps giving me error:
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
My styled components .js file:
import styled from "styled-components"
export const Wrapper = styled.div`
margin: 0 auto;
max-width: 1920px;
padding: 0;
`
export const PageContent = styled.div`
background-color: #455260;
height: 100%;
padding: 50px 90px;
color: #eff1ef;
font-weight: 300;
`
If I remove PageContent and write export default Wrapper at the end it works without problems.
Therefore I've tried to export with different methods:
export default { Wrapper, PageContent }
Any clues on what I might be missing?
I have a css file and I'm trying to figure out how to bring in and per memory I thought I read this in the docs but I'm getting an error. Given the scrollbar file of:
import styled from 'styled-components'
export const Scrollbar = styled.css`
html {
--scrollbarBG: ${({ theme }) => theme.colors.color01};
--thumbBG: ${({ theme }) => theme.colors.color04};
}
body::-webkit-scrollbar {
width: 16px;
}
body {
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
background-color: var(--thumbBG);
border-radius: 8px;
border: 4px solid var(--scrollbarBG);
}
`
My error is:
WebpackError: TypeError: Cannot read property 'withConfig' of
undefined
In my theme directory is my GlobalStyles.js:
import { createGlobalStyle } from 'styled-components'
// CSS
import Scrollbar from './Scrollbar'
const GlobalStyles = createGlobalStyle`
${Scrollbar}
`
export default GlobalStyles
When I search the docs I'm not seeing it in advanced. Searching the site I've read:
Import CSS File to Styled Component
How to move css-in-js (Styled Components) to an external css files during build using webpack - ReactJS
loading external css file just for one react component
React + Styled Components: Am I supposed to avoid CSS files altogether?
In styled components what is the correct way to bring in the css file to createGlobalStyle?
I'm creating a website(creating using React). so I want to add a full-screen image for the Home page. I'm using CSS module. when importing an image into the module.css it's not rendered. How can I fix this. Here is my code. I'm importing this (scr => assets folder)
codesandbox-link
Home.js
import React from 'react'
import styles from '../styles/Home.module.css'
const Home = () => {
return (
<div className={styles.Hero} ></div>
)
}
export default Home
Home.module.css
.Hero {
background-image: url(../assets/hero.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
It is CSS issue, your div, which is supposed to show the image in the background, has no height and width:
Background image is loading perfectly after adding below styles:
Global CSS (styles.css):
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
App.module.css:
.Hero {
background-image: url(./assets/hero.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
and in App.js:
import styles from "./App.module.css";
export default function App() {
return (
<div style={{ width: "100%", height: "100%" }}>
<div className={styles.Hero}></div>
</div>
);
}
I am not good at CSS. So, this may not be the perfect way to handle stylings (height / width). So, you may improve it. Here is the full code*.
As mentioned in docs, with webpack, you can load images in CSS as:
.Logo {
background-image: url(./logo.png);
}
Webpack finds all relative module references in CSS (they start with ./) and replaces them with the final paths from the compiled bundle.
*I provided full code as the image was not showing in codesandbox, but showing at my local machine.
Try this in a non-sandbox environment. The way you have imported className is fine.
I have a feeling sandbox is not reflecting it properly.
You can also try -
content:url(<path to image>);
in the className instead of background-image:url
I used the background in color and succeeded but the image didn't, you can import the image into App.js
import image from "./url";
return (
<img src={image} alt="" />
)
Coming from SCSS (SASS)
What would be the appropriate Styled-Components implementation of the below SCSS code?
SCSS:
.circle{
$size: 16px; // <-- SCSS FTW. use such a trick in styled-components
height: $size;
width: $size;
.. rest of properties...
}
Currently the styled-component (Circle) looks like this:
...lots of other styled exports
export const Circle = styled.div`
height: 16px;
width: 16px;
background: red;
border-radius: 50%;
`
...lots of other styled exports
Problem is, I want to keep that "meaningless" size variable in the same context where it's consumed (just like in SCSS) because nothing else cares or will ever care about it. I don't think dumping a variable somewhere and then using it with '${size}' is a "clean" way. such tactics are petty and promote messy code-base.
I have devised a neat trick to encapsulate variables only for a specific scope:
styled.h1(({size='4em', color='lime'}) => `
font-size: ${size};
color: ${color};
text-align: center;
`)
I've written a Medium post in the past which breaks down the explenation of this method
One way to solve this problem is to create a separate file with all the variables that you want to use later in your style files:
export const Variables = {
size: '16px',
bgColor: 'red',
}
then you can import it:
import { Variables } from './Variables'
export const Circle = styled.div`
height: ${Variables.size};
width: ${Variables.size};
background: ${Variables.bgColor};
border-radius: 50%;
`
You can use classic css properties (with IE11 polyfill in mind) like this:
--radioWidth: 42px;
.MuiRadio-root {
width: var(--radioWidth);
}
.conditionCollapse {
padding-left: var(--radioWidth);
}
I have several styled components in a row with a image.
I just need to add a space between HeaderLinks.
I've tried following way but it doesn't work.
const HeaderLink = styled.a`
color: #000;
font-size: 1.5em;
`;
const Wrapper = styled.div`
HeaderLink + HeaderLink {
margin-left: 1em;
}
`;
HeaderLink1|HeaderLink2|Image|HeaderLink3|HeaderLink4
So I want to add margin between HeaderLink1&HeaderLink2 and HeaderLink3&HeaderLink4.
How can I use styled component in styled css?
Just used ${HeaderLink} instead of HeaderLink.