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.
Related
import styled from "styled-components";
import Button from "#material-ui/core/Button";
export const StyledButton = styled(Button)`
margin: 20px;
`;
Im trying to eddit the button but it does not respond.how do i give the button the margin?
import styled from "styled-components";
import Button from "#material-ui/core/Button";
export const StyledButton = styled(Button)`
&& {
margin: 20px;
}
`;
Try it like this this guy explanes how you can use it in multiple ways
https://www.sipios.com/blog-tech/how-to-use-styled-components-with-material-ui-in-a-react-app
You would need to override the values for Material UI.
Styled Components recommends adding ampersands as stated here: (which you should follow)
https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
import styled from "styled-components";
import Button from "#material-ui/core/Button";
export const StyledButton = styled(Button)`
&&& {
margin: 20px;
}
`;
Another way to do that (which i often use) is to simply add !important next to your code.
So it would be something like:
margin: 20px !important;
So I am using react icons and I have two different icons that I am styling with styled components. My issue is that they essentially have the exact same styles, but the only difference is which icon I am choosing to style.
I don't know how to combine both icons into one styled component
Here is my code
const backArrow = styled(IoArrowBack)`
width: 50px;
height: 50px;
`;
const forwardArrow = styled(IoArrowForward)`
width: 50px;
height: 50px;
`;
Since I am using styled components, I just pass the icon into the () based on which one I want to style. The issue is I have over 12 lines of the exact same styles for both icons. It doesn't make sense to repeat the exact styles
How would I create one styled component, but display two different icons?
Example concept like this
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
But then the issue occurs if I were to add them to my JSX
Cause then how would I even add the code?
I can't do
<arrrowIcon>Back arrow</arrowIcon>
<arrrowIcon>Forward arrow</arrowIcon>
So it wouldn't know which icon is which.
Is this even possible with styled components, or would I just have to copy and paste the same styles for each icon?
This piece of code is a bit weird to me, I think this is not a valid code
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
However you can do a trick to get a shared style
const sharedIconStyle = css`
width: 50px;
height: 50px;
`
And
const styledArowBack= styled(IoArrowBack)`
${sharedIconStyle}
`
const styledArrowForward = styled(IoArrowForward)`
${sharedIconStyle}
`;
Could you just do it with React?
import React from "react";
import "./styles.css";
import { ReactComponent as icon1 } from "./icons/1.svg";
import { ReactComponent as icon2 } from "./icons/2.svg";
export default function App() {
return (
<div className="App">
<SizedIcon Icon={icon1} />
<SizedIcon Icon={icon2} />
</div>
);
}
const SizedIcon = ({ size = 50, Icon }) => {
console.log(typeof Icon);
return (
<div>
<Icon width={size} height={size} />
</div>
);
};
What I did is wrapped the icons in a div and styled the div, for example change the icon colors to red:
const IconStyles = styled.div`
color: red;
`
<IconStyles>
<IoArrowBack />
</IconStyles>
<IconStyles>
<IoArrowForward />
</IconStyles>
If you want to change the size of the icons then add a font-size in the div containing the icons, that is how I personally do it.
I am new to React with Styled Components and have run into the following issue:
If I have 10 Styled Components and each of them have the property: background-color: green;, do I have to write that for each Styled Component? Or is there some way to specify that for all? Thanks.
There are two ways to accomplish shared styles.
You can further style existing styled components with the styled function, so first declaring a basic styled component with shared styles and defining more specially styled components using it:
import styled from 'styled-components';
const Base = styled.div`
background-color: green;
`;
const StyledComp1 = styled(Base)`
display: flex;
`;
const StyledComp2 = styled(Base)`
display: block;
`;
You can use the styled-components css utility function:
import styled, { css } from 'styled-components';
const sharedStyles = css`
background-color: green;
`;
const StyledComp1 = styled.div`
${sharedStyles};
display: flex;
`;
const StyledComp2 = styled.div`
${sharedStyles};
display: block;
`;
The basic use of styling plain HTML elements with react-emotion as React components is like this:
import React from 'react';
import styled from 'react-emotion';
const StyledContainer = styled.div`
display: block;
box-sizing: border-box;
`;
The given code would give us something like this:
<div class="css-gf43fxd ferwf23sd"></div>
Is there anyway I can add an id attibute to that generated HTML element? Thanks in advance.
Just add the id attribute when you are using this component.
import React from 'react';
import styled from 'react-emotion';
const StyledContainer = styled.div`
display: block;
box-sizing: border-box;
`;
// and when you want to use this component add id attribute
<StyledContainer id="some-id">...</StyledContainer>
I use styled-components in my project. Now I would like to implement some simple animations like animate.css
Is that possible to use react-animations (or similar library) with styled-components ?
It's a waste of time to implements animations like in animate.css again. Additionally I don't want to install anothers package as Aphrodite because I have styled-components already.
I've found an answer with code:
import React from 'react';
import styled, { keyframes } from 'styled-components';
import { fadeIn } from 'react-animations';
const fader = keyframes`${fadeIn}`;
// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
animation: 1s ${fader} alternate infinite;
`;
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
export default () => {
// Render these styled components like normal react components. They will pass on all props and work
// like normal react components – except they're styled!
return (
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
);
}