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>
Related
I'm trying to create a custom button component using MUI on a React JS project. I've checked the docs and I discovered that I can do this using styled components. All worked well with the code presented below. The problem is that I want to create a more "customizable" component. I have inside my theme file 2 sets of colors (primary and secondary). The fact is that I want to create a button that is able to take a prop for this set of colors (primary / secondary).
import * as React from 'react';
import ButtonUnstyled, {
buttonUnstyledClasses,
ButtonUnstyledProps,
} from '#mui/core/ButtonUnstyled';
import { styled } from '#mui/system';
import { theme } from '../../theme';
const CustomButtonRoot = styled('button')(`
background-color: ${theme.palette[props.type].main};
padding: 15px 20px;
border-radius: 10px;
color: #fff;
`);
interface TodoButtonProps {
unstyledProps: ButtonUnstyledProps,
type?: 'primary' | 'secondary'
}
function CustomButton(props: TodoButtonProps) {
return <ButtonUnstyled {...props} component={CustomButtonRoot} />;
}
export default CustomButton
The question is: How I can include this prop inside the styled component code?
Pass a callback. In this callback the first argument is the props of the styled component. You can also use the style object instead of template string. More detail in this answer.
const CustomButtonRoot = styled("button")(
({ theme, myColor }) => `
padding: 15px 20px;
border-radius: 10px;
color: ${myColor};
`
);
<CustomButton myColor="red">abc</CustomButton>
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.
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;
`;
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>
);
}