React - Styled Component

About

Styled component is a Css In Js solution.

Utilising tagged template literals and the power of CSS, styled-components allows you to write actual CSS code to style your components.

styled-components

  • removes the mapping between components and styles
  • is compatible with both React (for web) and ReactNative
  • generate an actual stylesheet with classes at the end of the head of the document during runtime
  • attached the generated classes to the DOM nodes of styled components via the React className prop
  • does not use inline styles,

Syntax

// for a HTML tag
styled.h1

// for a custom component
styled('my-component')

Library

Sass-style helper functions: polished lightweight package tailor-made for styles in JavaScript.

Example

Example 1

With version 3.4.9

var style = `
	padding: 2em 1em;
	background: papayawhip;
`;
style = `${style}
	 
	&:hover {
		background: palevioletred;
	}
`;
style = `${style}
	 
	@media (max-width: 600px) {
		background: tomato;

		/* nested rules work as expected */
		&:hover {
			background: yellow;
		}

	}
`;
style = `${style}

	> p {
		text-decoration: underline;
	}
`;
style = `${style}
	 
	html.test & {
		display: none;
	}
`;

const Example = styled.default.div`${style}`;
  • Rendering
ReactDOM.render(
  <Example>
		<p>Hello World!</p>
  </Example>,
  document.getElementById('root')
)
<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

Example 2

With version 3.4.9

const Button = styled.default.button`
    font-family: "the-font";
    color: #3b9fe2;
    /* White background */
    background-color: rgba(224, 90, 184, 0.51);
    border: 0px;
    margin: 2px;
    padding:2em;
    vertical-align: middle;
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
 
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
   
    &:before {
     ${ props  => props.plus && 'content: \'\\e800\';' }
     ${ props  => props.minus && 'content: \'\\e801\';' }
    }
    
`;
  • Rendering
ReactDOM.render(
  <Button>
		Hello World!
  </Button>,
  document.getElementById('app')
)
<div id="app">
  <!-- This div's content will be managed by React and contains the components rendering -->
</div>

Note

  • Global Css
import { injectGlobal } from 'styled-components'

injectGlobal`
   body {
       margin:0;
       padding:0;
   }
`
import styled, {keyframes, ThemeProvider } from 'styled-components'


`
${ props => props.backwards && 'animation-direction: reverse;'}
${ props => props.inverseColor ? 'color: black;' : 'color: blue;'}
color : ${ props => props.inverseColor ? 'black' : 'blue'};
background-colour: ${ props => props.theme.bg || 'black' }
`
  • Theme
props => props.theme.inverseColor

<ThemeProvider theme={{
	alternateTheme: true;
}}>
	<Header uppercase>
</ThemeProvider>
  • Default export
export default () => (

<Header>
	<Logo>
</Header>

)
  • export css in an otther file

in the client

import styles from './styles'

styled.div`
    ${ styles.headerStyle}
`
  • in the module
import { css } from 'styled-components'


export default {
headerStyle: css`
   height:150px;
   padding: 200px;
`
}

Documentation / Reference





Discover More
CSS - CSS In Js

css in js is the manipulation of css rule completely with the help of javascript. The css is not in a stylesheet but in Javascript code. Css in Js is used mostly to style react components rather than...
React - Styling

Styling a component in React. Traditional CSS-file-based styling with the import of stylesheet (with SASS, PostCSS, ..) SSR does not like it very much. See No Pseudo Classes/Element No Media...



Share this page:
Follow us:
Task Runner