devmeetings-react-ts-fork
  • Devmeeting React + Typescript
  • Speed dating
  • Typescript
    • It's just JavaScript
    • Basic types
    • Typing objects
    • Typing functions
    • Modules
    • Generics
    • Tasks
  • Hello React
    • Quick look around
    • The first component
    • JSX
    • Tasks
  • Components & Props
    • Small components
    • Passing data to a component
    • Loops in JSX
    • Tasks
  • Stateful components
    • Handling events
    • Components with internal state
    • Talking to a parent component
    • Smart and dumb components
    • Before the break
    • Tasks
  • Side-effects and context
    • Side-effects
    • Prop drilling
    • Using context
    • Tasks
  • What's next
    • Styling
    • Learning component's lifecycle
    • State Management
Powered by GitBook
On this page
  • Styling your components:
  • CSS-in-JS

Was this helpful?

  1. What's next

Styling

Styling your components:

Well, you can use CSS and CSS processors and then use them as you would if it was simple HTML:

#ready {
  background-color: #123456;
  display: flex;
  justify-content: center;
}
  
  #ready .container {
    padding: 0 10px; 
   }
const React = () => (
  <div id='ready'>
    <div className='container'/>
  </div>    
)

CSS-in-JS

But there are more options and the most recent trend is CSS-in-JS. Styled-components is one of the options:

import styled from 'styled-components';

const Ready = styled.div` // or styled(View) in the case of React Native
  background-color: '#123456';
  display: flex,
  justify-content: center,
`;

const Container = styled.div` // or styled(View) in the case of React Native
  padding: 0 10px,
`;

const ReactOrReactNative = () => (
  <Ready>
    <Container/>
  </Ready>    
)

PreviousWhat's nextNextLearning component's lifecycle

Last updated 5 years ago

Was this helpful?