Brad  Braun

Brad Braun

1620871620

How I Structure Styled-components

  • Automatic critical CSS — No unnecessary code on your page, only renders the CSS when the components are injected into a page
  • Dynamic styling — It adapts the styling of a component based on the props
  • Supports Global CSS
  • Supports Server Side Rendering (SSR)
  • Automatic vendor prefixes
  • Unique class names, that means no class names bugs

I use styled-system to pair with styled-components. It makes the Component Orient Design lifestyle easy 😊 The style functions API of the styled-system exposes powerful props and with that leverage, it makes the styled-components even more powerful 💪 and we can use those props for styling the components or elements which can also be based on a theme.

While building or developing a component, the question that arises is

How to design & develop the component, so that the component can be re-used?

#javascript

What is GEEK

Buddha Community

How I Structure Styled-components
Luna  Mosciski

Luna Mosciski

1601224020

Creating Styled Vue Components With vue-styled-components

To created component with built-in styles with a few lines of code, you can use the vue-styled-components to create them.

Getting Started

First, install the package by running:

npm i vue-styled-components

Then you can create some basic components, for example:

import styled from "vue-styled-components";

export const StyledTitle = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

export const StyledHeader = styled.header`
  padding: 4em;
  background: yellow;
`;

You just need to import the package then use the template tags that came with the code to create new styled elements.

You can change the font size, text alignment, and other things with the tags.

The h1 tag makes an h1 element.

header makes a styled header element.

Then you can use it by registering the component and use it:

<template>
  <div id="app">
    <styled-header>
      <b>header</b>
    </styled-header>
    <styled-title>hello</styled-title>
  </div>
</template>

<script>
import { StyledTitle, StyledHeader } from "./components";

export default {
  name: "App",
  components: {
    "styled-title": StyledTitle,
    "styled-header": StyledHeader
  }
};
</script>

You just register them in components and reference it in our templates.

The styles in the string are applied automatically.

#software-development #vue #vuejs #styled-components #front-end-development

Dock  Koelpin

Dock Koelpin

1600522320

The Advanced Way to Style with Styled Components

After learning the basics, I set about migrating my codebase to Styled Components. In doing so, I gradually uncovered some issues and inefficiencies. There were little things here and there that I wanted to do, but couldn’t, with the knowledge I had. Many of these, I solved in roundabout ways so they weren’t major issues. But, it was enough for me to dive back into the Styled Components documentation. Luckily for me, the contributors of Styled Components had already figured them out.

Style Objects

Sometimes we are forced to use style objects via the style prop. This could be because the codebase is only partially migrated to Styled Components or because some third party library uses it, something quite common with hooks-based libraries such as React Dropzone or React Table. Styled Components can merge these style objects into Styled Component styling.

const StylePropButton = styled(Button)`
  ${props => props.$style ?? {}}
`;

const App = () => {
  return (
    <StylePropButton
      $style={{ backgroundColor: '#007bff' }}
      onClick={() => alert('clicked!')}
      type="button"
    >
      Primary
    </StylePropButton>
  );
};

Style Prop Button

Style Prop Button

This component accepts an inline style object that is then merged into the Styled Components styles by simply returning the object into the template literal. The result is a seamless integration between two drastically different ways of styling React.

Note the I’ve named the prop $style instead of style. This prevents the styles from being applied twice. If the prop name was style, the button would be styled via inline styles as well since Styled Components passes props to the underlying component. Props with names that are prefixed with $, called transient props, are only used by the defined Styled Component and are not passed down to the underlying component.

So why do it this way? You could just use the style prop directly and not merge the the style object into the Styled Components styles. The main advantage is dealing with specificity. Inline styles will always be at a higher priority than external CSS through Styled Components. This method will prevent the use of inline styles and instead convert them into external CSS via Styled Components. Then, you can easily override those styles as you see fit, without the need for !important.

#web-development #javascript #styled-components #css #react

Mark Mara

Mark Mara

1610801700

Build Reusable React Components with styled-components

I first used styled-components when I starting working on my first large application, and I really like how it works. It allows you to build reusable components that are easy to grow and adapt to new situations as you build different layouts.

I’m going to go over some ways you can use styled-components to make reusable components that abstract the CSS and HTML, creating your own custom component library.

#react #styled-components #javascript #reactjs

Dock  Koelpin

Dock Koelpin

1600456140

The Modern Way to Style React Apps with Styled Components

My Journey

Like many, I first started styling React with inline CSS. It was an adjustment coming from stylesheets but I really liked the ability to define localized styles and leverage the power of Javascript. Of course, there were issues such as performance and lack of pseudo-selector support, but overall I was happy with it and there was no compelling reason or deficiency to search for another way to style my components.

When I was first introduced to Styled Components, I was a bit apprehensive of the benefits, having gotten used to inline CSS for so long. After all, React documentation (at the time), still used inline CSS for all their examples. As I prototyped the framework, I discovered a best of both worlds between inline CSS and traditional stylesheets.

Styled Components

While defined very differently, Styled Components act fundamentally like React components. They both take props as input and output HTML.

Let’s take this sample button component styled similarly to Bootstrap’s buttons with Styled Components.

import styled from 'styled-components';

const Button = styled.button`
  display: inline-block;
  padding: 6px 12px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: white;
  background-color: #6c757d;
  border: none;
  border-radius: 4px;
  :not(:disabled) {
    cursor: pointer;
  }
  :hover {
    background-color: #5a6268;
  }
`;

The styled component factory is imported and used to generate a button with styles using a template literal (...). This factory supports all valid HTML elements whether that be divh1p, etc. Similarly, the styles in the template literal accepts all valid CSS so you can go crazy with complex CSS selectors.

#styled-components #javascript #react #web-development #css

Neal  Bode

Neal Bode

1603975620

How to Build a Great Style Guide with React & styled-components Pt.1

How hard could it be to create a style guide for your website, app, or any other project? And, what if you want to build it with React and styled-components? So, will you accept this challenge? Great! This tutorial will take you through the whole process and show you how you, too, can build a great style guide from scratch! Now, let’s start and have some fun!

How to Build a Great Style Guide with React & styled-components part 2.

How to Build a Great Style Guide with React & styled-components part 3.

Project setup

Let’s start with the first step. This step is about putting together the dependencies we will need to develop our style guide. We will need to install four of them-reactreact-domreact-scripts and styled-componentsreactreact-dom probably need no explanation. react-scripts is a bundle of scripts and configuration used and provided by Create React App project.

We will use these scripts and configs to make our work faster an easier. We will not have to deal with any bundler such as Webpack or Parcel. This all will be taken care of by react-scripts. Finally, we will use styled-components to take care about styling. We will not work with any CSS or Sass files. All styling will be done in JavaScript.

If this is the first time you will be using styled-components, you may want to take a look at its documentation. Then, you can also go through two tutorials focused on this library. First is A Simple Introduction to Styled-components. Second is Styled-Components – Mastering the Fundamentals Through Practice. This will help you understand how styled-components works.

Next, we will create scripts to run the style guide on dev server and also to build it when we are done. As I mentioned, we will use scripts from Create React App project. Now, the only thing we need to do is to “wire” together specific scripts with npm scripts. We will create four scripts-startbuildtest and eject. However, today, we will only use the first two. And, that is all. This is how our package.json looks like.

Note: you will need either npm or yarn package managers installed on your computer in order to install dependencies and work on this style guide. Npm is distributed with node. You can get the installer for your system on nodejs website. If you prefer yarn, that is actually really much better option, you can download the installer here.

// package.json

{
  "name": "ui-style-guide",
  "version": "1.0.0",
  "description": "",
  "keywords": [
    "design",
    "react",
    "reactjs",
    "styled-components",
    "style guide",
    "web design"
  ],
  "main": "src/index.js",
  "dependencies": {
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "react-scripts": "1.1.4",
    "styled-components": "3.4.5"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

#react #styled-components #javascript #design development