React Styled Components Course (V5)

Bootstraps a brand new React app in the terminal with Create React App, navigates to the desktop, runs npx create-react-app with the name style, and installs dependencies.

Install styled components in a new React project and remove boilerplate files. Start the dev server and preview changes at localhost 3000 with side-by-side and large-screen views.

Explore basic styling options in a Create React App: inline styles and a stylesheet. See inline styles with a style object and camelCase properties, and CSS via class names.

Explore the major flaws of inline and global styles as projects scale, including copy and paste maintenance and conflicting class names, and preview how styled components offer a better option.

Learn to set up and render your first styled component in React by installing styled-components, using template literals, and copying styles from index.css for the title.

Learn how to set up styled components in React, import styled, create a basic title component, use tag template literals, and understand scoped styles and class name generation.

Create a styled button component in React using styled, naming it default button, applying index css styles, centering text, and swapping between styled components and native html on larger screens.

Organize React styled components by separating the title and button into dedicated files, using default export for the title and named export for the button to keep App.js clean.

Learn how to customize styled components with props in React, using interpolation and a function to apply color changes (red when a prop like special is present) across components.

Learn to access props through destructuring in function parameters and use a ternary operator to set a default blue color, turning red when the special prop is present.

Extend styled components by passing a React component and customize its styles, creating a hipster button with new width, transparent background, and distinct color and border.

Extend React components with styled components to customize Material UI buttons by passing props like color and variant, and override text transform from uppercase to capitalized.

Learn to build more complex React components with styled components by structuring multi-element outputs, using wrappers, and styling with scoped CSS and simple class names to avoid global collisions.

Explore alternative syntax for styling React components using styled components, comparing wrapper-based styling with extending the React component and passing className via props.

Learn how to use global classes inside styled components in React, apply background gray and title styles, and manage CSS specificity when global and styled classes collide.

Learn to use CSS variables globally with the :root selector, define values like --primary, and apply var(--primary) in CSS and styled components, optionally via a utils file for one-place updates.

Export a colors object from utils.js and import it to interpolate the primary color in styled components, demonstrating how to share global CSS variables through a JavaScript utility.

Compare CSS variables in global CSS with a utils border function to show import requirements, reusability, and default solid when no type is provided.

Create a cart card component with styled components, apply global styles for body background, then structure the card with an image, product name, and price.

Apply styles to the styled component container by setting width, max-width, and background color via CSS variables, and ensure the image uses full width with top border radii.

Master nesting in styled components by scoping styles to footer heading four, use flex layout with space-between and center alignment, add padding, and balance specificity and depth with nested selectors.

Explore media queries, hover states, and before pseudo elements in styled components for the card component, using ampersand syntax, transitions, box shadows, and cursor changes.

Explore global styles and theming in styled components by creating a global styles file, using createGlobalStyle, and applying it at the app root to set body and CSS variables.

Learn to implement theming with styled-components using ThemeProvider, define light and dark theme objects, apply them via theme props in components, and toggle with a simple useState-based function.

Learn to build a loading spinner using styled components, keyframes animations, and rotating border effects, with practical setup, exports, and a reusable animation snippet.

Learn how to use the as prop in styled components to render a button as a link, and adjust padding, width, text decoration, text align, and font size.

Learn how the css prop styles elements without a styled component by applying a class, using css syntax, and how styled-components/macro enables friendly class names in Create React App.

Explore how the CSS helper function in styled components groups multiple declarations, enabling large button styling via props and interpolation, without using the CSS prop or macro.

Build a tiny form in React using the attributes method, including a form, an input, and a submit button, importing the styled component and applying the css prop.

Explore how to create a reusable button component in a form with styled components, using the attributes method to set default types and props-driven defaults for button and submit.

Learn to style React styled components buttons conditionally, using a helper function and interpolation to apply submit button styles with the CSS prop, including display, width, margin, and border radius.

Apply the attributes method to input components by defining default type and placeholder via props, then extend with styled input for consistent box sizing, padding, borders, and width.

Learn to style complex props with styled components by building a simple list, applying odd/even item styling and price-based colors using a css helper and a list map.

Explore how to style React components with styled components using multiple conditions in a products example, including props spreading, mapping lists, and price-based color logic.