e.preventDefault(); // Prevent form submission input.blur(); // remove focus input.value = ""; // optional: clear the input

Styled Components: Styled CSS Where React Rules!

What are styled components?

Styled-components uses tagged template literals to style the components. It removes the mapping between components and styles which means that when you’re defining your styles you’re actually creating a normal ReactJS component, that has your styles attached to it.

Work around:

  • Create a Title component that’ll render a <h1> tag with some styles.
const Title = styled.h1`
 font-size: 1.5em;
 text-align: center;
 color: blue;
`;
  • Use Title like any other React component – except they’re styled.
render(
 <Title>
 I am a styled Component!
 </Title>
);

Playing with props, made it easier! How? That’s explained: You can pass a function/any prop to a styled component’s template literal to adapt it based on its props.

Work around:

const Button = styled.button`
 /* Adapt the colours based on primary prop */
 background: ${props => props.primary ? 'red' : 'white'};
 color: ${props => props.primary ? 'white' : 'red'};
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border: 2px solid blue;
 border-radius: 3px;
`;
  • That’s how you render it.
render(
 <div>
 <Button>Normal</Button>
 <Button primary>Primary</Button>
 </div>
);

Style any Component: You can give style to any of the user-defined/third- party components as long as they’re accepting the className prop.

Work around:

/* This could be react-router's Link for example */
const Link = ({ className, children }) => (
 <a className={className}>
 {children}
 </a>
);
/* Extend the properties of Link */
const StyledLink = styled(Link)`
 color: blue;
 font-weight: bold;
`;
  • And here you render it.
render(
 <div>
 <Link>Unstyled Link</Link>
 <br />
 <StyledLink>Styled Link</StyledLink>
 </div>
);

Extending Styles: Styled components have made it pretty easier to extend a component to generate another. You give style to any component by inheriting it’s default properties (duplicate styles are overrided).

Work around:

  • The Button without any extension of props.
const Button = styled.button`
 color: palevioletred;
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border: 2px solid blue;
 border-radius: 3px;
`;
  • We’re extending Button with some extra styles.
const RedButton = Button.extend`
 color: red;
 border-color: red;
`;
  • See it working.
render(
 <div>
 <Button>Normal Button</Button>
 <RedButton>Red Button</RedButton>
 </div>
);

Note: Applying extend property creates a new stylesheet by extending the old one, and thus doesn’t generate two classes. This is how you make everything look as you want without any extra effort, and this is what React want us to do (Component Based Structure).

Related Posts

Latest Posts

  • All Posts
  • Generative AI
  • manufacturing
  • News
  • Portfolio
    •   Back
    • Android
    • iOS
    • Java
    • PHP
    • MEAN
    • Ruby
    • DotNet
    • IoT
    • Cloud
    • Testing
    • Roku
    • CMS
    • Python

India

Plot No. 11/2, Phase 3, Hinjewadi Rajiv Gandhi Infotech Park, Pune, India – 411057.
info@tudip.com
+91-96-8990-0537

United States

1999 S. Bascom Ave Suite 700, Campbell CA. 95008, USA.
info@tudip.com
+1-408-216-8162

Canada

64 Caracas Road North York, Toronto Ontario M2K 1B1, Canada.
info@tudip.com

Mexico

Calle Amado Nervo #785 Interior B Colonia Ladron De Guevara 44600 Guadalajara, Jalisco, Mexico.
info@tudip.com

Colombia

Cra. 9 # 113-53 Of. 1405 Bogotá D.C., Colombia.
info@tudip.com

UAE

Tudip Information Technologies L.L.C Office No 109, ABU HAIL BUILDING 13, Abu Hail, Dubai, UAE.
info@tudip.com

Nigeria

22 Kumasi Crescent, Wuse 2, Abuja, Nigeria.
info@tudip.com