Total newbie on using styled-ponents
. I'm wondering what's the usage of it? How should I implement ponent life cycle methods after styling it? For simplicity sake I've removed all the other style.
import styled from 'styled-ponents';
const Button = styled.button`
background-color: 'green'
`
export default Button;
I'm wondering how do I further working on this Button
ponent?
Traditionally we can declare a class-based ponent and implement some lifecycle methods, but now with this styled-ponents
, I'm not really sure how to bine them together as they are really the single Button
Component?
UPDATES:
Full sourcecode for Button.js
. By having the below code, all styles will be gone and I can't understand the problem
import React from 'react';
import styled from 'styled-ponents';
// import Button from 'react-bootstrap/Button';
import color from '../config/color';
const Button = ({ children, onPress }) => (
<button type="button" onPress={onPress}>{children}</button>
);
const StyledButton = styled(Button)`
width: 12rem;
height: 54px;
font-size: 1rem;
background-color: ${(props) => {
if (props.inverted) return 'white';
if (props.disabled) return color.disabled;
return (props.color || color.primary);
}};
color: ${(props) => {
if (props.disabled) return color.disabledText;
if (props.inverted) return (props.color || color.primary);
return 'white';
}};
border:${(props) => (props.inverted ? `2px solid ${props.color || color.primary}` : 'none')};
border-radius: 60px;
&:hover {
filter: ${(props) => (props.inverted || props.disabled ? 'none' : 'brightness(95%)')}
}
`;
export default StyledButton;
Total newbie on using styled-ponents
. I'm wondering what's the usage of it? How should I implement ponent life cycle methods after styling it? For simplicity sake I've removed all the other style.
import styled from 'styled-ponents';
const Button = styled.button`
background-color: 'green'
`
export default Button;
I'm wondering how do I further working on this Button
ponent?
Traditionally we can declare a class-based ponent and implement some lifecycle methods, but now with this styled-ponents
, I'm not really sure how to bine them together as they are really the single Button
Component?
UPDATES:
Full sourcecode for Button.js
. By having the below code, all styles will be gone and I can't understand the problem
import React from 'react';
import styled from 'styled-ponents';
// import Button from 'react-bootstrap/Button';
import color from '../config/color';
const Button = ({ children, onPress }) => (
<button type="button" onPress={onPress}>{children}</button>
);
const StyledButton = styled(Button)`
width: 12rem;
height: 54px;
font-size: 1rem;
background-color: ${(props) => {
if (props.inverted) return 'white';
if (props.disabled) return color.disabled;
return (props.color || color.primary);
}};
color: ${(props) => {
if (props.disabled) return color.disabledText;
if (props.inverted) return (props.color || color.primary);
return 'white';
}};
border:${(props) => (props.inverted ? `2px solid ${props.color || color.primary}` : 'none')};
border-radius: 60px;
&:hover {
filter: ${(props) => (props.inverted || props.disabled ? 'none' : 'brightness(95%)')}
}
`;
export default StyledButton;
Share
Improve this question
edited May 12, 2020 at 15:07
wentjun
42.6k10 gold badges107 silver badges113 bronze badges
asked May 12, 2020 at 9:27
IsaacIsaac
12.9k18 gold badges63 silver badges134 bronze badges
3
- 1 Hmmm.. What do you want to do with the styled button in this ponent? – wentjun Commented May 12, 2020 at 9:30
-
@wentjun: I guess I am not quite understanding the concept..Traditionally I would define
Button
ponent inButton.js
. I'm thinking to usestyled-ponents
to just style it? – Isaac Commented May 12, 2020 at 9:31 - You can use it like any other ponent..! Let me write up an example. – wentjun Commented May 12, 2020 at 9:32
3 Answers
Reset to default 5In order to style a custom react ponent you can pass on the custom ponent name as argument to styled
. According to the doc:
The styled method works perfectly on all of your own or any third-party ponent, as long as they attach the passed className prop to a DOM element.
import React from 'react';
import styled from 'styled-ponents';
// import Button from 'react-bootstrap/Button';
import color from '../config/color';
const Button = ({ children, className onPress }) => (
<button type="button" className={className} onPress={onPress}>{children}</button>
);
const StyledButton = styled(Button)`
width: 12rem;
height: 54px;
font-size: 1rem;
background-color: ${(props) => {
if (props.inverted) return 'white';
if (props.disabled) return color.disabled;
return (props.color || color.primary);
}};
color: ${(props) => {
if (props.disabled) return color.disabledText;
if (props.inverted) return (props.color || color.primary);
return 'white';
}};
border:${(props) => (props.inverted ? `2px solid ${props.color || color.primary}` : 'none')};
border-radius: 60px;
&:hover {
filter: ${(props) => (props.inverted || props.disabled ? 'none' : 'brightness(95%)')}
}
`;
export default StyledButton;
Read the styled-ponent documentation
for more details on styling any ponent
Let's rename the styled button ponent to reduce confusion between the 2 similarly named ponents.
styled-button.tsx:
import styled from 'styled-ponents';
const StyledButton = styled.button`
background-color: 'green'
`
export default StyledButton;
When you import the styled button ponent into your Button
ponent, you can actually use make use of it the way you usually do when you are working with traditional HTML <button>
elements, as its props are exposed and available on the styled ponent as well.
button.tsx:
import StyledButton from './StyledButton'
class Button extends React.Component {
ponentDidMount() {
const { someProps, otherProps } = this.props;
// some lifecycle logic
}
handleClick() {
// do the rest
}
render() {
return <StyledButton onClick={() = this.handleClick()} />;
}
}
If you want, you can even pass in props from the parent Button
ponent, to the child StyledButton
ponent. This will allow you to customise it.
render() {
const { color } = this.props;
return <StyledButton background={color} onClick={() = this.handleClick()} />;
}
And on your StyledButton ponent, you just need to make the following changes:
const StyledButton = styled.button`
background-color: ${({ color }) => color || 'green'}
`
What other answers lack is for styling custom ponents like Button
you have to pass a className
prop thought it.
The styling is injected through className
property.
const ButtonDefaultStyle = styled.button`
width: 5rem;
`;
const Button = ({ className, children, onPress }) => (
<ButtonDefaultStyle className={className} type="button" onPress={onPress}>
{children}
</ButtonDefaultStyle>
);
export default Button;
Then the styles can be applied:
import Button from './Button.js'
// Will override width: 5rem;
const StyledButton = styled(Button)`
width: 12rem;
`;