ReactJS Styling in React Syllabus

Styling in React syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Styling in React in ReactJS, not a summary of it.

1. 1

   CSS in JS

   3 topics

   • Styled-Components
   • Emotion
   • JSS
2. 2

   Preprocessors

   3 topics

   • SASS
   • LESS
   • Stylus
3. 3

   CSS Frameworks

   3 topics

   • Bootstrap
   • Material-UI
   • Tailwind CSS

Styling in React flashcards for ReactJS

23 of 49 cards from the Styling in React deck — real questions with worked answers.

1. What is a CSS-in-JS library in the React ecosystem?

   A library that lets you write CSS styles directly within JavaScript/TypeScript files, scoping styles to components and generating unique class names at runtime or build time. Examples include Styled-Components, Emotion, and JSS.

2. What is Styled-Components?

   A popular CSS-in-JS library that uses tagged template literals to style React components. It creates real React components with styles attached, generates unique class names automatically, and supports theming and dynamic props-based styling.

3. How do you create a styled button using Styled-Components' tagged template literal syntax?

   const Button = styled.button` color: white; background: blue; `; Then render <Button>Click</Button>. The styled.button call returns a React component with the CSS applied.

4. In Styled-Components, how do you make styles respond to a component's props?

   Pass a function inside the template literal that receives props: const Btn = styled.button` background: ${props => props.primary ? 'blue' : 'gray'}; `; The interpolated function is evaluated with the component's props.

5. How do you extend/inherit styles from an existing styled component in Styled-Components?

   Use styled() as a function wrapping the base component: const PrimaryButton = styled(Button)` background: navy; `; This keeps Button's styles and overrides/adds new ones.

6. How is theming provided in Styled-Components?

   Wrap the app in a <ThemeProvider theme={themeObject}>. Styled components then access theme via props.theme inside interpolations, e.g. ${props => props.theme.primary}. Emotion uses the same ThemeProvider pattern.

7. What is Emotion in React styling?

   A high-performance, flexible CSS-in-JS library offering two primary APIs: the css prop (@emotion/react) for inline object/string styles, and styled components (@emotion/styled) similar to Styled-Components. Known for small bundle size and source maps.

8. What is the `css` prop in Emotion and how is it enabled?

   The css prop lets you pass styles directly to any element: <div css={{ color: 'red' }} />. It is enabled via the JSX pragma /** @jsxImportSource @emotion/react */ or Babel/preset configuration so JSX transforms recognize the css prop.

9. Compare Styled-Components and Emotion.

   Both are CSS-in-JS with tagged-template styled APIs, theming via ThemeProvider, and dynamic props. Emotion additionally offers the css prop and object styles, tends to have a smaller bundle and slightly better performance, while Styled-Components pioneered the styled API and has a large ecosystem.

10. What is JSS (JavaScript Style Sheets)?

    A CSS-in-JS library that authors styles as JavaScript objects, compiles them to real CSS, and injects them into the DOM. It uses a plugin architecture and was the styling engine underlying Material-UI v4.

11. In JSS, how are style rules typically written?

    As a JavaScript object where keys are class names and values are objects of CSS property/value pairs, camelCased: const styles = { button: { color: 'white', backgroundColor: 'blue' } }; JSS then generates real CSS and unique class names.

12. What does the JSS `createUseStyles` hook return?

    It returns a custom React hook (useStyles) that, when called, returns an object mapping your rule names to generated unique class-name strings, which you then apply to elements via className={classes.button}.

13. What is SASS/SCSS?

    Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, mixins, functions, inheritance, and partials. SCSS is its CSS-compatible syntax; both compile to plain CSS before the browser sees them.

14. What are the two syntaxes of Sass?

    1) The indented syntax (.sass files) which omits braces and semicolons and uses indentation. 2) SCSS (.scss files) which uses braces and semicolons and is a superset of CSS3, making it the more common modern choice.

15. How do you declare and use a variable in SCSS?

    Prefix with a dollar sign: $primary: #3498db; then use it: color: $primary;. Sass variables are resolved at compile time (unlike CSS custom properties which are runtime).

16. What is a mixin in Sass and how is it used?

    A reusable block of declarations defined with @mixin name(args) and included with @include name(args). Example: @mixin flex-center { display: flex; justify-content: center; align-items: center; } .box { @include flex-center; }

17. What does Sass nesting allow, and what is the `&` selector?

    Nesting lets you write child/related selectors inside a parent block, mirroring HTML structure. The & references the parent selector, useful for pseudo-classes and modifiers, e.g. &:hover or &.active.

18. How do you integrate SASS into a React project?

    Install the sass package (npm install sass), then import .scss/.sass files directly in components: import './App.scss'. Bundlers like Vite and Create React App detect sass and compile it automatically. CSS Modules work too via file.module.scss.

19. What is LESS?

    A CSS preprocessor (Leaner Style Sheets) similar to Sass, adding variables, mixins, nesting, operations, and functions. It compiles to CSS and was historically associated with Bootstrap (v3) and Ant Design.

20. How do you declare a variable in LESS versus SASS?

    LESS uses the @ prefix: @primary: #3498db; while SASS uses the $ prefix: $primary: #3498db;. Both are resolved at compile time. (Note: @ can be ambiguous with CSS at-rules, one reason many prefer Sass's $.)

21. How are mixins written in LESS?

    Any class or id ruleset can be reused as a mixin by referencing it: define .rounded { border-radius: 8px; } and include with .rounded(); inside another selector. Parametric mixins accept arguments: .border(@w) { border: @w solid; }.

22. What is Stylus (CSS preprocessor)?

    An expressive, minimalist CSS preprocessor written in Node.js. Its most notable feature is optional/omittable syntax: colons, semicolons, braces, and even the class delimiters can be dropped, relying on indentation and whitespace.

23. How do Stylus variables and its optional syntax look?

    Variables need no sigil: primary = #3498db. Rules can drop braces/colons/semicolons: body color primary font-size 16px Stylus infers structure from indentation, making it the most flexible-syntax preprocessor.

See more Styling in React flashcards →

Planning Styling in React for ReactJS

Styling in React (ReactJS) FAQ