React - Styled Component

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - 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,
Advertising

3 - Syntax

// for a HTML tag
styled.h1
 
// for a custom component
styled('my-component')

4 - Library

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

5 - Example

5.1 - 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>

Advertising

5.2 - 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>

6 - 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;
`
}
Advertising

7 - Documentation / Reference

web/javascript/react/styled_component.txt · Last modified: 2019/05/30 14:45 by gerardnico