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;
`;
Related
I'm a benninger learning React with Styled Components.
App.js
const BasicButton = styled.button`
background-color: purple;
`;
Increase.js
const StyledButtonIncrease = styled(props.BasicButton)`
padding: 2rem;
border: none;
border-radius: 7px;
`;
How can I receive a Styled Component in another React component to extend the styling? I tried to use the example above but it didn't work.
What you will actually do is export the styled that you want to extend and import it in the file that you will create your new styled.
ex:
App.js
export const BasicButton = styled.button`
background-color: purple;
`;
increase.js
import { BasicButton } from '../App.js';
const StyledButtonIncrease = styled(BasicButton)`
padding: 2rem;
border: none;
border-radius: 7px;
`;
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;
import React, from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
const StyledLink = styled(Link)`
text-decoration: none;
cursor: pointer;
color: black;
font-size: 14px;
line-height: 22px;
font-weight: 60";
color: #393e46;
letter-spacing: .01em;
`;
const App = () => {
return <StyledLink>some text</StyledLink>
}
export default App;
I'm trying to style the Link component from react-router-dom with Styled components syntax, but it breaks my whole app and it does not work as intented.
Inside the Link component, there is an a tag, you need to style her:
styled(Link)`
a {
your style here
}
`
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.
import styled from 'styled-components';
import { Button } from 'antd';
const StyledButton = styled(Button)`
height: 100%;
border-width: 0px;
&:hover {
color: palevioletred;
border-color: red;
}
`;
export default StyledButton;
Overriding style of antd Button component is not working?
I just take your code and it overrides the style of antd correctly. There may be some other reason