Here's my code.
/*Default Styled Component*/
import styled from "styled-components";
export const MenuWrapper = styled.ul`
border: 1px solid blue;
`
export const MenuList = styled.li`
color: blue;
`
export const Menu = (
<MenuWrapper>
<MenuList>1</MenuList>
<MenuList>2</MenuList>
<MenuList>3</MenuList>
</MenuWrapper>
);
/* This is where I tried to restyle */
import styled from 'styled-components';
import {
Menu,
MenuWrapper,
MenuList,
} from '../src/components/Menu.style';
const StyledMenu = styled(Menu)`
${MenuWrapper} {
border: 1px solid green;
}
${MenuList} {
color: green;
}
What I want to do is to create a default styled component with multiple elements in it and restyle according to my needs by using 'styled(Menu)' and adding ${MenuWrapper} ${MenuList} as selectors for nested elements but they all don't seem to work... Anyone can help..? Thank you in advance...
I see several issues here, but in the first place it seems like the problem is caused by the fact that you're not attaching the className prop to what's inside Menu.
See https://styled-components.com/docs/basics#styling-any-component and this Codesandbox: https://codesandbox.io/s/sweet-carlos-vt165s
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;
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>
**import styled from 'styled-components';
import { FaChevronRight } from 'react-icons/fa';
const ButtonSty = styled.button`
width:128px;
height:32px;
border:2px solid #074EE8;
box-sizing:border-box;
border-radius:4px;
`
const Ancor = styled.a`
font-style:normal;
font-weight:normal;
font-size:16px;
line-height:18px;
color:#074EE8;
text-decoration:none;
`
const Icon = styled.FaChevronRight`
width:4px;
height:9px;
border:2px solid #074EE8;
`
function Button() {
return (
<div>
<ButtonSty> <Ancor href="#">Saznaj vise **<Icon />**</Ancor> </ButtonSty>
</div>
)
}
export default Button**
Guestion: how to style a react-icon with styled-component
When i create Icon and put in ancor the error above show
I do not know how to style component with react-icon
The dot notation is for styling HTML elements, i.e. button, a, div, etc. The correct syntax for styling another React component is:
const Icon = styled(FaChevronRight)`
width: 4px;
height: 9px;
border: 2px solid #074EE8;
`
See: Extending Styles
This is a custom component, so you have to wrap it with parentheses:
const Icon = styled(FaChevronRight)`
width:4px;
height:9px;
border:2px solid #074EE8;
`
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.
What I'm trying to achieve is to be able to add extra styling to my Button.tsx(essentially extending the styles) when using this component in different files. As you can see in my Button.tsx I have defined some default styles I would like the button to have, but as I use more buttons across my app, I might want to change the background or color, etc.
One thing I could do is this:
Example of not what I want to do:
import React from 'react'
import styled from 'styled-components'
interface IButton = {
children: string
}
export default function Button({ children }: IButton) {
const Button = styled.button`
padding: 1em;
background: #ccc;
border-radius: 5px;
`
const RedButton = styled(Button)`
// Inherits all of the styles from Button.
background: red;
`
return (
<Button>{children}</Button
)
}
This example will inherit my Button styles and then allows me to extend. The problem with this solution is, if I decide to add more buttons, I will always have to come back to this file and then add the different variants, which could start to make this file get pretty chunky and messy.
Ideally I would like to extend my <Button> from the App.tsx file, or which ever file I'm using my <Button> in.
How could I adjust the code below to achieve this?
Button.tsx
import React from 'react'
import styled from 'styled-components'
interface IButton = {
children: string
}
export default function Button({ children }: IButton) {
const Button = styled.button`
padding: 1em;
background: #ccc;
border-radius: 5px;
`
return (
<Button>{children}</Button
)
}
App.tsx
import React from 'react'
import styled from 'styled-components'
export default function App() {
return (
{/* This button would render with the default styles from Button.tsx */}
<Button>Button One</Button>
{/* This button would render with extended styles, a blue background for example */}
<Button>Button Two</Button>
)
}
In your App.tsx you can do the same:
const BlueButton = styled(Button)`
background: blue;
`
what styled-components does is it creates a class with background blue and pass it to your Button. so in your Button.tsx you need to accept the css class
export default function Button({ className, children }: IButton) {
const Button = styled.button`
padding: 1em;
background: #ccc;
border-radius: 5px;
`
return (
<Button className={className}>{children}</Button
)
}
Edit
another way to do is to export the style like this
const BaseStyles = css`
padding: 1em;
background: #ccc;
border-radius: 5px;
`
const BaseButton = styled.button`
${BaseStyles}
`
Then later override the styles
const BlueButton = styled.button`
${BaseStyles}
background: blue;
`