4

Total newbie on using styled-components. I'm wondering what's the usage of it? How should I implement component life cycle methods after styling it? For simplicity sake I've removed all the other style.

import styled from 'styled-components';

const Button = styled.button`
  background-color: 'green'
`

export default Button;

I'm wondering how do I further working on this Button component?

Traditionally we can declare a class-based component and implement some lifecycle methods, but now with this styled-components, I'm not really sure how to combine 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-components';
// 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;

3
  • 1
    Hmmm.. What do you want to do with the styled button in this component?
    – wentjun
    May 12, 2020 at 9:30
  • @wentjun: I guess I am not quite understanding the concept..Traditionally I would define Button component in Button.js. I'm thinking to use styled-components to just style it?
    – Isaac
    May 12, 2020 at 9:31
  • You can use it like any other component..! Let me write up an example.
    – wentjun
    May 12, 2020 at 9:32

3 Answers 3

5

In order to style a custom react component you can pass on the custom component name as argument to styled. According to the doc:

The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.

import React from 'react';
import styled from 'styled-components';
// 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-component documentation for more details on styling any component

2
  • Thanks for answering, I had the exact similar thoughts when I read the docs but I failed to implement it. Can you take a look at my updated code and see which part has gone wrong? Coz the style is gone once I implemented like this
    – Isaac
    May 12, 2020 at 9:45
  • @issac, you need to pass on a classsName to DOM element you want to style. According to doc :The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element. May 12, 2020 at 10:14
2

Let's rename the styled button component to reduce confusion between the 2 similarly named components.

styled-button.tsx:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: 'green'
`

export default StyledButton; 

When you import the styled button component into your Button component, 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 component as well.

button.tsx:

import StyledButton from './StyledButton'

class Button extends React.Component {
  componentDidMount() {
    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 component, to the child StyledButton component. This will allow you to customise it.

render() {
  const { color } = this.props;

  return <StyledButton background={color} onClick={() = this.handleClick()} />;
}

And on your StyledButton component, you just need to make the following changes:

const StyledButton = styled.button`
  background-color: ${({ color }) => color || 'green'}
`
0
2

What other answers lack is for styling custom components 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;
`;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.