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
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;
**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;
`
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 have an Button that I want to animate :after and ::before width onMouseOver from 0% to 50%,
and when onMouseLeave from 50% to 0
i'm using react-hooks but it's working only onMouseOver
what is my problem ?
my code in this link
https://codesandbox.io/s/cold-haze-t7b4c
You could animate things with the following using styled components. Although you could do the same with just the padding instead of using :before and :after.
File: Button.js
import styled from "styled-components";
const Button = styled.button`
display: flex;
line-height: 30px;
padding: 0;
&:before,
&:after {
display: block;
width: 0px;
content: "";
transition: all 250ms ease-in-out 0s;
}
&:hover {
&:before, &:after {
width: 50px;
}
}
`;
export default Button;
File: App.js
import React from "react";
import "./styles.css";
import Button from "./Button";
export default function App() {
return (
<div className="App">
<Button>Hover Me</Button>
</div>
);
}
I've created the following styled-component for my gatsby project.
import React from "react"
import styled, { css } from 'styled-components'
const Button = styled.div`
background-color: #4E58F5;
width: 200px;
padding: 20px;
margin-right: 30px;
margin-top: 30px;
border-radius: 30px;
color: #FFFFFF;
transition: background-color 0.25s ease;
${props => props.primary && css`
background-color: #FFF;
color: red;
`}
`;
export default props => (
<Button>{props.buttonText}</Button>
)
I've not found the examples in the documentation to be clear or consistent enough to understand how I should be passing in the "primary" option to my components.
I'm trying to do the following, on my index.js page. The Button renders, but the primary word has no effect. What am I missing here?
<Button primary buttonText="Submit" />
The component you're exporting, does not recognize the primary property, and thus cannot pass it on to the Button element. You can fix this either by exporting the styled component itself, or by passing unrecognized props to the Button.
const Button = styled.div`
[...]
`;
export default Button;
OR
export default ({buttonText, ...props})=>(
<Button {...props}>{buttonText}</Button>
);