I have 2 different pages and a .css file for each page. Both have a class selector with the same name, but only one of them is applied. I've only worked with react-native so far, and had both the content and the styling in the same file. I couldn't figure out what is happening...
Let's say we have the following css class:
.container {
display: flex;
align-items: center;
justify-content: center;
}
Even if the css file is not imported in one file, the class is applied to a div, if it's given in className.
For example, we have 2 files: CarPage.tsx and BikePage.tsx. The container class is imported in CarPage, but it's used in BikePage and it is applied. Does anyone know if this is how it should work?
In React, once CSS is imported, it will be "combined" and applied to the entire DOM. React uses CSS files as global scope.
In order to achieve locally scoped CSS, you will have to use:
CSS module
Create `[name].module.css` file then:
import React, { Component } from 'react';
import styles from './example.module.css';
class Example extends Component {
render() {
return <button className={styles.container }>Button</button>;
}
}
export default Example;
using libraries such as styled-components).
class Example extends Component {
const Button = styled.button`
background: transparent;
border-radius: 3px;
color: red;
margin: 0 1em;
padding: 0.25em 1em;
`
render(){
return <Button />
};
}
Related
I have a styles.module.scss file and a react component. How can add multiple classNames from the styles to ONE html element?
Below is my code:
/styles/styles.module.scss file
.gridContainer {
display: grid;
gap: 2em;
grid-template-columns: 1fr 25em;
grid-template-rows: auto;
}
.gridItem {
display: flex;
flex-flow: column;
}
.imageWithText {
border: 1px solid #4338ca;
border-radius: 1.6rem;
align-self: start;
}
/pages/infoPage.tsx file
import styles from "../styles/styles.module.scss";
export default function InfoPage({}: PageProps) {
<div className={styles.gridContainer}>
<div className={styles.gridItem}>
...
</div>
{/* I have added TWO style selectors here */}
<div className={(styles.gridItem, styles.imageWithText)}>
...
</div>
</div>
}
When I run this code, the div with TWO style selectors does not work as expected. The second classname={styles.gridItem} does not take the scss styles from the .gridItem selector. This div takes the styling only from the .imageWithText.
EXPECTED BEHAVIOR: I want the styles for both the .gridItem and the .imageWithText to apply to the second div.
I believe I am not writing the multiple selectors in the html element correctly and this has possibly got something to do with the way scss works. Any help would be appreciated.
You can try with backtic character (`), so your code :
<div className={`${styles.gridItem} ${styles.imageWithText}`}>
In webpack, css-loader I use localIdentName hash:base64:10 to "hide" real class names.
I have also some global components to put inside DOM structure page.
But, sometimes I need change style component form parent. When I use explicit class names (local), styles is working, but after render with hash, "duplicates" class name has diffrent hash and not overrite styles.
I mean about .window .paper - I want to overite .paper form a parent, but I haven't idea how can I get rendered hash name from file.
structure:
|-main.js
|-style.less
|-paper
|-index.js
|-style.less
main.js
import React from 'react';
import s from "./style.less";
import Paper from './paper/index.js';
export class Main extends React.Component {
render() {
return (
<div className={s.window}>
<Paper>example text</Paper>
</div>
)
}
}
style.less
#import 'paper/style.less';
.window {
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
width: 100%;
height: 100%;
.paper { //<-----
background-color: yellow;
}
}
paper/index.js:
import React from 'react';
import s from "./paper/style.less";
export class Paper extends React.Component {
render() {
const { children } = this.props;
return (
<div className={s.paper}>
<div className={s.content} ref={...}>{children}</div>
</div>
)
}
}
paper/style.less:
.paper { //<-----
display: block;
background-color: white;
border: 1px solid black;
.content {
margin: 20px;
}
}
I am pretty new to styled components, and I am trying to convert a site with vanilla css to styled components. My issue is that I have a div with with multiple classes, but I don't know how do to render my Gatsby frontend using styled components
For example the following snippet:
<div className="section-center hero-center">
</div>
I started by creating two styled components files like so:
import styled from "styled-components"
export const SectionCenter = styled.div`
width: 90vw;
margin: 0 auto;
max-width: 1170px;
`
and the second component:
import styled from "styled-components"
export const HeroCenter = styled.div`
height: 100%;
display: grid;
align-items: center;
`
In my Hero.js component I do my import statements
import React from "react"
import * as styled from '../styled'
const Hero = () => {
return (
<styled. SectionCenter>
<styled.HeroCenter>
// content goes here
</styled.HeroCenter>
</styled.SectionCenter >
)
}
export default Hero
This is what I have so far, but it's not the way the original div was, with one div having two styles. Is there another way to accomplish that? To have two styles on one div similar to vanilla css?
Styles can be extended. So if heroCenter is a custom version of SectionCenter, you can do something like:
import styled from "styled-components"
export const SectionCenter = styled.div`
width: 90vw;
margin: 0 auto;
max-width: 1170px;
`
export const HeroCenter = styled(SectionCenter)`
width: 100vw;
`
Then Hero.js can use just the HeroCenter component. More details in official docs.
hi I am using styled componant in react
const H4 = styled.h4`
font-size: 15px;
letter-spacing: 0.38px;
line-height: 1.33;
color: red;
padding: 20px;
`;
<H4>Small header</H4>
it will give exsact style in H4 tag. but how can I override this padding with utility classes like m-b-10 it will give margin-bottom:10px
something like this <H4 m-b-10>small header</H4>
same time I need to use this utility class whereever I want. in css I can simply write
m-b-10{margin-bottom:10px !important};
how can achieve this things on styled componenet?
One of the best solutions is to use https://styled-system.com/, it plays well with Styled Components and other libraries like Emotion and it offers what you need, to use utility-classes in the component definition.
Example:
import styled from 'styled-components'
import { color, space, fontSize } from 'styled-system'
// Set default styles and add styled-system functions to your component
const Box = styled.div`
/*defaut styles */
color: white;
font-size: 25px;
padding: 20px;
/* configurable properties */;
${color};
${space};
${fontSize};
`;
And to use it:
<Box bg="black" >
Lorem Ipsum
</Box>
<Box bg="black" color="green" fontSize="12px" p="10px">
Lorem Ipsum
</Box>
That code, will render this:
It also supports Media-Querys, Themes etc..
You can play with this CodeAndSandbox where it is been used with Styled Components https://codesandbox.io/s/styled-components-with-styled-system-njr17
You can use variables like
const m-b-10 = '20px';
const H4 = styled.h4`
padding: ${m-b-10};
`;
You can define such variables in a separate file and import them to styles components
You can define utility classes in the top component of your React tree. The example uses Gatsby.js, but you can easily adapt it for other React framework.
// src/components/layout.js
const GlobalStyles = createGlobalStyles`
html {
/* Put your CSS variables here*/
}
.m-b-10 {
margin-bottom: 10px;
}
`
Then make whatever defined in createGlobalStyles available for access in child components.
// src/components/layout.js
export default function Layout({ children }) {
return (
<React.Fragment>
<GlobalStyle />
{children}
</React.Fragment>
)
}
// src/pages.index.js
import Layout from "../components/layout"
const H4 = styled.h4`
font-size: 15px;
letter-spacing: 0.38px;
line-height: 1.33;
color: red;
padding: 20px;
`;
const IndexPage = () => {
return (
<Layout>
<H4 className="m-b-10" />
</Layout>
)
}
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.