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;
Related
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
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>
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