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;

• javascript
• css
• reactjs
• styled-ponents

• 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 in Button.js. I'm thinking to use styled-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 3

In 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;
`;