I am using mixins and media for first time and my css skills aren't that great either. Its used in React app. I am getting SassError: Undefined mixin. Error on this piece of code and not sure what I am missing here. Is there any library I need to bring in?
In my map.tsx file I am importing scss file and using the div tag
import styles from "./map.module.scss";
<div className={styles.helpbutton}>
<AboutPopup />
</div>
In my map.module.scss I have this css
.helpbutton {
position: absolute;
bottom: 2em;
right: 2em;
#include for-phone-only {
position: absolute;
top: 2em;
right: 2em;
}
}
#mixin for-phone-only { // Seems like error is coming here
#media (max-width: 599px) {
#content;
}
}
But I am getting this error SassError: Undefined mixin.
Not sure why is it saying its undefined when it is right there in the same file.
I have a styled component like
export const UL = styled.ul`
list-style: none
`
export const Nav = styled.nav`
${UL}: {
margin-top: 40px;
}
background-color: #222;
padding: 0.35em 1.25em;
`
I ran the below command to add babel-plugin-emotion
npm i --save-dev babel-plugin-emotion
I get this error
what else do I need to do to get the plugin working with emotion?
Turns out you can remove the module babel-plugin-emotion and use macros provided by emotion.
Use the following import
import styled from "#emotion/styled/macro";
That's it and you are good to go.
Here is my react page:
import { motion } from "framer-motion";
import styled from "styled-components";
const Outer = styled(motion.div)`
height: 100vh;
display: flex;
place-items: center;
background-color: #232323;
`;
const Inner = styled(motion.div)`
height: 100px;
width: 100px;
background-color: cadetblue;
border-radius: 5px;
`;
const Framer = () => (
<Outer>
<Inner>
Hey
</Inner>
</Outer>
);
export default Framer;
This is located under the /pages folder in a next.js app.
With <Inner>Hey</Inner>, it all works fine, but change this to <Inner /> and it consistently gives me Uncaught TypeError: Cannot read property 'textContent' of null when rendering on the server.
This has been a consistent problem whilst I'm getting to grips with next.js. It's hampering my production.
Error is reproduced on next.js#9.2.0 and next.js#9.1.7
<Outer>
<h1>Hey</h1>
<Inner />
</Outer>
Tested with above and renders fine. It would seem next.js pages need a little bit of text!
This error can also easily happen when you create a _document.js file and forget to include there NextScript tag. Happened to me - so I better post it here.
Removing the google chrome extension JSON Viewer Awesome seems to have fixed this.
Parses as JSON without text, but renders markup with text.
Why: I am dissecting another developers code to learn React
Where this was found: In a React app: On GitHib
Folder Structure: components > Button
Files Contained: index.jsx & styles.scss
What I think it means: It seems pretty obvious to me that this locks the scss styling to the local folder (specifically the element with the attribute of styleName = Button). However, I'm confused because I cannot find any other reference to this technique anywhere online. The closest thing I can find are articles talking about :export and :import.
What dependency allows this to happen?
Is this native to Sass?
Is this created by the dev to serve a specific purpose?
...and other such clarifying questions.
:local(.Button) {
background-color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
color: #27466E;
padding: 7px 12px;
&:hover {
opacity: 0.8;
}
&:disabled {
opacity: 0.5;
}
}
I am using styled-components and am trying to set a background image like so
const HeaderImage= styled.div`
background-image: url('../../assets/image.png');
';
I've also tried without the quotes, like so
const HeaderImage= styled.div`
background-image: url(../../assets/image.png);
';
In both cases, I get the same result
http://localhost:3000/assets/image.png Failed to load resource: the server responded with a status of 404 (Not Found)
I am using Richard Kall's react starter
The file is definitely in the specified location.
Am I loading it incorrectly?
I should mention, I'm very new to this (React, and styled-components)
You should import images in the following manner (assuming that you have webpack configured for importing media assets).
import myImage from '../../assets/image.png';
/* ... */
const HeaderImage = styled.div`
background-image: url(${myImage});
`;
EDIT : this answer was edited after the question title was updated, due to misleading question title.
Using image as background-image CSS property :
import LogoSrc from './assets/logo.png';
/* ... */
const LogoDiv = styled.div`
background-image: url(${LogoSrc});
/* width and height should be set otherwise container will have either have them as 0 or grow depending on its contents */
`;
/* ... */
<LogoDiv />
Normal way of importing and using images :
import LogoSrc from './assets/logo.png';
/* ... */
const Logo = styled.img`
width: 30px;
height: 30px;
margin: 15px;
`;
/* ... inside the render or return of your component ... */
<Logo src={LogoSrc} />
EDIT 2: For reference there is another way to use styled-components, mostly used when using components that you already import (i.e. ant-design components of from other component library) or in case of components that don't work using styled._cp_name_ notation.
NOTE: components need to be compatible with styled-components.
Imagine you would export Logo on a file and import it on another component file :
const Logo = styled.img`
width: 30px;
height: 30px;
margin: 15px;
`;
export default Logo;
Then, on the file where you would import it, you could add more styles by :
import Logo from '../components/Logo';
const L = styled(Logo)`
border: 1px dashed black;
`;
/* ... then inside render or return ... */
<L />
import logo from 'public/images/logo.jpg';
/* ... */
const HeaderImg = styled.img.attrs({
src: `${logo}`
})`
width: 50px;
height: 30px;
`;
Importing files is one way of doing it as is suggested above, but it isn't the only way.
Here is an alternative solution, referencing file paths, the original way, using a custom express extension to target your dist folder. (Personally I prefer this approach because it keeps the css clean from the jsx and is self readable)
Disclaimer:
This solution is for webpack-dev-server for testing, but once the code is deployed, as long as you have generated your assets with your dist folder it will work by default.
Example:
component.tsx
const Button = styled.button`
background: url('/assets/file.svg');
`
webpack.config.js
const dist = path.resolve(__dirname, 'dist');
{
devServer: {
contentBase: dist,
historyApiFallback: true,
before: app => {
app.use('/assets', express.static(path.resolve(dist, '/assets')));
}
}
}
You can pass props to a component like this:
export const ImgTop = styled.div`
display: block;
background-image: ${props => `url(${props.background})`};
background-size: cover;
`
<ImgTop background={urlimagen}></ImgTop>
For those seeking a dynamic solution, you can also make something work with the <img> element. Some psuedo code that could make this possible:
// styles.tsx
import styled from "styled-components";
export const Relative = styled.div`
position: relative;
`;
//using the img function is no more supported
export const Image = styled.img`
z-index: 0;
position: absolute;
top: 0;
left: 0;
`;
export const TextInFrontOfImage = styled.p`
z-index: 1;
`;
// index.tsx
//..
<Relative>
<Image src={props.url}></Image>
<TextInFrontOfImage>Lorem Ipsum</TextInFrontOfImage>
</Relative>
Using some combination of position: relative/absolute and z-index you should be able to achieve similar results to the background-image property.