CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
Isaac
Isaac

Reputation: 12894

How to use styled-components in react component

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;

Upvotes: 4

Views: 3322

Answers (3)

Shubham Khatri
Shubham Khatri

Reputation: 281950

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

Upvotes: 5

Dennis Vash
Dennis Vash

Reputation: 53964

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

Upvotes: 2

wentjun
wentjun

Reputation: 42566

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'}
`

Upvotes: 2

Related Questions