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>
);
}
Related
If i use a prop condition on the main component it will work per instance.
So for example if i have:
const Div = styled.div<Props>`
${(props) => {
return css`
${props.test && "border: 5px solid red;"};
`;
}}
`;
only components which have the test prop will have this ugly border :)
But if i use this same condition on a nested css rule like that:
const Div = styled.div<Props>`
${(props) => {
return css`
.tabletScreen & {
${props.test && "border: 5px solid red;"};
}
`;
}}
`;
All instances of this component will have this ugly border if one of the components has this test prop.
When inspect it i see that all instances of the component gets the same class generated, so the this:
.tabletScreen .sc-jcFjpl {
border: 5px solid red;
}
Is implemented to all instances.
But on the first case (when the condition is not nested) the component with the test prop will get another class so it won't override the others.
How can i fix this?
Use && instead of & and it'll be scoped to that stylistic instance of the component. Single ampersand refers to the "static component class".
More info here: https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting
import React from "react";
import { render } from "react-dom";
import styled, { css } from "styled-components";
import Wrapper from "./Wrapper";
import Title from "./Title";
// Render these styled components like normal react components.
// They will pass on all props and work
// like normal react components – except they're styled!
const Div = styled.div`
${(props) => {
return css`
.tabletScreen {
border: ${props.test && '5px solid red'};
}
`;
}}
`;
const App = () => (
<Wrapper>
<Div test>
Without Test
<div className="tabletScreen">TabletScreen</div>
</Div>
</Wrapper>
);
render(<App />, document.getElementById("root"));
I hava menu bar from bootstrap, but I would like to change some colors, e.g.button styles.
import Button from 'react-bootstrap/Button';
<Header__Button>
Something
</Header__Button>
const Header__Button = styled(Button)`
color: '#003D58';
background: 'transparent';
`;
This was my approach to do it, but it does not work. What is the correct and working way to handle this ?
The styled-components package uses the same syntax that use would use in a CSS stylesheet rather than in a Javascript object. So you don't want to use quotes around the values. Removing them will fix it:
import Button from "react-bootstrap/Button";
import styled from "styled-components";
const Header__Button = styled(Button)`
color: #003D58;
background: transparent;
`;
You can do like this,
const styles = css `
.custom-button {
color: '#003D58';
background: 'transparent';
}`;
<div css={styles}>
<Button className='custom-button'>Hello</Button>
</div>
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.
so if I have a React Button component that uses styled component like so:
import styled, { css } from "styled-components";
import React from "react";
const Button = ({ theme, children }) => {
const StyledButton = styled.a`
padding: 10px 20px;
border-radius: 20px;
${theme === "primary" &&
css`
color: black;
background: white;
`}
${theme === "secondary" &&
css`
color: white;
background: black;
`}
`;
return <StyledButton>{children}</StyledButton>;
};
export default Button;
Is it possible to display this component, alongside its React code & HTML/CSS code on Storybook? (Without having to hard code the HTML/CSS code in)
I was thinking of using React's renderToString() to convert it into HTML and using the styled component's string for the CSS. Not sure if this is possible?
Yes, it is a storybook addon, not a React API.
See storysource addon.
Styled components looks great, but I am having trouble organizing my components. My first venture with is a tag list, that automatically colors the tags. After some trial I came up with a component that can be used like this:
// An array of tags. The string hashes determine the color
<ColorTags tags={post.frontmatter.tags} inline/>
It is implemented as follows:
components/
ColorTags // functional component
ColorTagLI // styled component
ColorTagUL // styled component
With:
// ColorTags
import ColorTagLI from './ColorTagLI'
import ColorTagUL from './ColorTagUL'
export default ({tags, inline}) =>
<ColorTagUL>
{tags.map( tag =>
<ColorTagLI key={tag} colorString={tag} inline>
<Link to="/">
{tag}
</Link>
</ColorTagLI>
)}
</ColorTagUL>
// ColorTagUL
export default styled.ul`
list-style-type: none;
margin: 0;
padding: 0;
`
// ColorTagLI
const colorHash = new ColorHash({lightness: [0.4, 0.5, 0.6]});
const hslColor = cString => {
const [h, s, l] = colorHash.hsl(cString)
return `hsl(${h}, ${s*100}%, ${l*100}%)`
}
export default styled.li`
color: white;
background-color: ${props => hslColor(props.colorString)};
display: ${props => props.inline ? 'inline-block' : 'block'};
padding: 0.25rem 0.5rem;
margin: 0.25rem;
> a { text-decoration: none; color: white; }
`
Some questions I have:
What's a good way to discern between styled and regular components? I
decided on appending the HTML tag to the styled components, since
they are always tied to that.
Is it not a problem to have the Link tag inside a Styled component?
Should the ColorTag components be in a folder of themselves? Because they are tightly coupled.
Is using theinline prop a smart way to switch between configurations? It may
result in a lot of conditional statements for margins, padding and
media queries... Perhaps better make two different components?
You can use utility function isStyledComponent.
Why would it be a problem to have a Link component inside styled component?
Matter of opinion, if you believe they are tightly coupled you can create /ColorTag directory with index.js file that exports only what should be exposed.
Yes it may result in a lot of conditional statements, that's why you can extend styles on styled components.
I hope I understood you right and my answers are clear.