样式组件化_样式化的组件入门

最新推荐文章于 2024-05-31 14:44:29 发布

cumian9828

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量342

点赞数

文章标签： css java html react python

原文链接：https://www.freecodecamp.org/news/styled-components-getting-started-2018/

版权

样式组件化

We're going to style the basic create react app with styled-components to look something like this:

我们将使用样式组件对基本的create react应用进行样式设置，如下所示：

But first, preamble✨: I have always struggled with styling sites, it seems to be an aspect of starting web development that is either an afterthought or glossed over. Up until December last year I didn't really like styling anything at all with CSS, it was a chore rather than something I enjoyed doing.

但是首先，序言✨：我一直在努力设计网站，这似乎是开始Web开发的一个方面，这是事后思考或掩盖的。直到去年12月，我还真的不喜欢使用CSS样式化样式，这是一件琐事，而不是我喜欢做的事情。

This was until I started using styled-components, when I joined a build to learn project for a Chingu voyage (grad.then() if you're interested) we decided to use a CSS-in-JS package, Marina who was on my team was such an inspiration for me watching how components were styled and really gave me the confidence to start using styled-components.

直到我开始使用样式化组件为止，当我加入构建以学习Chingu航程的项目( grad.then()如果您有兴趣))时，我们决定使用CSS-in-JS包， Marina是我的团队激发了我灵感，观看了如何对组件进行样式设置，这确实使我有信心开始使用样式化组件。

我之前CSS (me with css before)

I want to share what I have learned so far by going through styling a basic react application.

我想通过设计基本的React应用程序来分享到目前为止我学到的东西。

There's some basic CSS concepts in this post that I was not aware of before starting out with styled-components that I presume are assumed in styling web pages.

在开始使用我认为在样式网页中假定的样式化组件之前，这篇文章中有一些基本CSS概念我还没有意识到。

Styling the body element of a site is assumed, so for when you are starting out with a blank canvas there are some defaults for all modern web browsers you add to your site, like leaving font size at 16px (or 1rem) or box-sizing: border-box; there's some packages out there to take care of this for you as well.

假定网站的主体元素具有样式，因此，当您开始使用空白画布时，您添加到网站的所有现代网络浏览器都有一些默认设置，例如将字体大小保留为16px(或1rem)或按box-sizing: border-box; 还有一些软件包可以帮您解决这个问题。

安装样式化的组件 (Install styled-components)

Ok let's bootstrap the basic react application you get when using Create React App with npx, if you already have Create React App installed globally then you can use the command without npx.

好吧，让我们引导一下使用带有npx Create React App时获得的基本react应用程序，如果已经全局安装了Create React App，则可以使用不带npx的命令。

npx create-react-app style-with-styled-components
cd style-with-styled-components/
npm i styled-components

Ok, now we have the basic app we can style, thankfully Dan has kindly provided the starting styles for us so let's begin my using them with styled-components.

好的，现在我们有了可以样式化的基本应用程序，幸好Dan为我们提供了起始样式，所以让我们开始将它们与样式化组件一起使用。

The way the CRA CSS is laid out, assumes that you will have a corresponding CSS file for each component, which can help with maintaining the CSS and lends to the React idea of having all your files separated into their component parts.

CRA CSS的布局方式假定您将为每个组件都有一个对应CSS文件，这可以帮助维护CSS并有助于把所有文件都分成组件的React想法。

We can start with the App.js file and it's accompanying App.css file. Let's take a look at the App.js first:

我们可以从App.js文件及其随附的App.css文件开始。让我们先来看一下App.js ：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
export default App;

In styled-components we'd create components for each of these elements that replace the aforementioned className's. Ok we can start by migrating our styles into components, let's do one component first to get an idea of where we're going with this.

在样式化组件中，我们将为上述每个元素创建组件，以代替上述className 。好的，我们可以从将样式迁移到组件中开始，让我们首先做一个组件，以了解我们将如何使用它。

First, import styled into the App.js module:

首先，将styled导入App.js模块：

import styled from 'styled-components';

Now let's look at <div className="App">, it's the top level div for this component and is what I like to call the wrapper for the component. So let's give it an imaginative name AppWrapper.

现在让我们看一下<div className="App"> ，它是该组件的顶级div，也是我喜欢将该组件称为包装器的东西。因此，我们给它一个富有想象力的名称AppWrapper。

Referring to the App.css there is text-align: center; which belongs to this, so:

引用App.css有text-align: center; 属于这个，所以：

const AppWrapper = styled.div`
  text-align: center;
`;

So here we have defined the AppWrapper const as a styled.div followed by back ticks inside of the back ticks we can write any regular CSS with the exact same CSS syntax you wold in a normal .css file.

因此，在这里，我们将AppWrapper常量定义为styled.div后跟在AppWrapper的styled.div ，我们可以编写与普通.css文件中使用CSS语法完全相同的任何常规CSS。

Now that we have our AppWrapper we can replace the top level div on the App.js component.

现在有了AppWrapper我们可以替换App.js组件上的顶级div。

import React, { Component } from 'react';
import styled from 'styled-components';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <AppWrapper>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </AppWrapper>
    );
  }
}
export default App;

样式化组件的所有事物 (styled-components all the things)

So let's do that for the remaining four CSS classes, and take a look, I'll define them underneath the AppWrapper here:

因此，让我们对其余四个CSS类进行操作，然后看一看，我将在AppWrapper下面定义它们：

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;
const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
`;
const AppHeader = styled.div`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`;
const AppTitle = styled.h1`
  font-size: 1.3em;
`;
const AppIntro = styled.p`
  font-size: large;
`;

So first off we've created a variable for the React svg animation, you'll need to import the keyframes helper from styled-components like so:

因此，首先我们为React svg 动画创建了一个变量，您需要从样式化组件中导入keyframes帮助器，如下所示：

import styled, { keyframes } from 'styled-components';

this can now be used throughout the App.js component and we can add an on hover selector to any of our styled-components within this module. Here we're going to add it to the AppLogo to keep the super sweet rotating React logo.

现在，可以在整个App.js组件中使用它，并且我们可以在此模块中的任何样式组件中添加一个on- hover选择器。在这里，我们将其添加到AppLogo以保持超级可爱的旋转React徽标。

const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`;

Ok, our app shouldn't look any different as we haven't added in our styled-components to the app render() method, so let's do that now.

好的，我们的应用看起来应该没有什么不同，因为我们没有将样式组件添加到应用render()方法中，所以现在就开始做吧。

Let's also change the intro text. You can add a wrapper for the <code> tags something like:

让我们也更改介绍文字。您可以为<code>标记添加包装，如下所示：

const CodeWrapper = styled.code`
  font-size: 1.3rem;
`;

But if you prefer you can nest selectors within the component, like:

但是，如果您愿意，可以将选择器嵌套在组件中，例如：

const AppIntro = styled.p`
  color: ${props => props.theme.dark};
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`;

Let's have a look at the render() method now…

现在让我们看一下render()方法…

render() {
  return (
    <AppWrapper>
      <AppHeader>
        <AppLogo src={logo} alt="logo" />
        <AppTitle>Welcome to React</AppTitle>
      </AppHeader>
      <AppIntro>
        Bootstrapped with <code>create-react-app</code>.
      </AppIntro>
      <AppIntro>
        Components styled with <code>styled-components</code>{' '}
        <EmojiWrapper aria-label="nail polish"></EmojiWrapper>
      </AppIntro>
    </AppWrapper>
  )
}

Now all the classes originally used in App.js have been replaced so there's no need for the import './App.css' mapping, remove that aaaaand! Still no change!! Which is a good thing because at the moment we're swapping out the .css files for styled-components.

现在，已替换了App.js最初使用的所有类，因此无需import './App.css'映射，请删除该aaaaand！还是没有变化！！这是一件好事，因为目前我们正在将.css文件换成样式组件。

Cool, we have now replaced all the css with styled-components, now we can take a look at injectGlobal.

太酷了，我们现在已经用样式化组件替换了所有css，现在我们来看看injectGlobal 。

Let's take a look at how the App.js file should look before we move on:

在继续之前，让我们看一下App.js文件的外观：

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import logo from './logo.svg';

const AppWrapper = styled.div`
  text-align: center;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`;

const AppHeader = styled.div`
  background-color: #222;
  height: 12rem;
  padding: 1rem;
  color: white;
`;

const AppTitle = styled.h1`
  font-weight: 900;
`;

const AppIntro = styled.p`
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`;

const EmojiWrapper = styled.span.attrs({
  role: 'img',
})``;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader>
          <AppLogo src={logo} alt="logo" />
          <AppTitle>Welcome to React</AppTitle>
        </AppHeader>
        <AppIntro>
          Bootstrapped with <code>create-react-app</code>.
        </AppIntro>
        <AppIntro>
          Components styled with <code>styled-components</code> <EmojiWrapper aria-label="nail polish" />
        </AppIntro>
      </AppWrapper>
    );
  }
}

export default App;

使用jectGlobal设置身体样式 (Style the body with injectGlobal)

For styling the body of our react app we currently have the index.css file that is being imported into the mounting point of our app in the index.js file.

对于造型的身体React，我们的应用程序，我们目前拥有的index.css正在被导入到我们的应用程序在安装点文件index.js文件。

To style the body we can use injectGlobal from styled-components which adds the styles directly to the stylesheet.

要为主体设置样式，我们可以使用来自styled-components的injectGlobal ，它将样式直接添加到样式表中。

To do this you bring in the injectGolabl named export from styled-components and add your styles between the back ticks.

为此，您需要从样式组件中injectGolabl名为export的injectGolabl ，并在injectGolabl之间添加样式。

The current index.css looks like this:

当前的index.css看起来像这样：

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

Let's add a theme folder in the src directory and add a globalStyle.js file where we can keep all our styles we want to use throughout the app, keeping the styles on one place will make changes simpler.

让我们在src目录中添加一个theme文件夹，并添加一个globalStyle.js文件，在这里我们可以保留我们想要在整个应用程序中使用的所有样式，将样式保留在一个位置将使更改变得更简单。

In src/theme/globalStyle.js we'll need to import the injectGlobal named export from styled-components and add the index.css styles into it:

在src/theme/globalStyle.js我们需要导入injectGlobal从风格组件命名出口并添加index.css风格到它：

import { injectGlobal } from 'styled-components';

injectGlobal`
  body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }
`;

Ok, now we're adding the body style to the stylesheet directly so there is no need for the index.css file mapping that is in index.js it should look like this now:

好的，现在我们将主体样式直接添加到样式表中，因此不再需要index.js的index.css文件映射，它现在看起来应该像这样：

import React from 'react' import ReactDOM from 'react-dom'

import App from './App'

import registerServiceWorker from './registerServiceWorker'

ReactDOM.render(<App />, document.getElementById('root'))

registerServiceWorker()

We should still have our nice sans-serif font going on, but let's add in some nice Roboto for the body and Montserrat for the heading in our globalStyle.js module. We can import Google fonts with an @import in injectGlobal and apply Roboto to the body:

我们仍然应该继续使用不错的sans-serif字体，但是让我们在globalStyle.js模块中为主体添加一些漂亮的Roboto，为标题添加蒙特塞拉特。我们可以使用injectGlobal的@import导入Google字体，并将Roboto应用于正文：

injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat|Roboto');
 
  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
`;

Cool now we can add our imported font for or app header, and there's the option if we want all our <h1>'s to use the same font we can add that to the injectGlobal in our globalStyle.js module.

现在很酷，我们可以为或应用程序标题添加导入的字体，如果我们希望所有<h1>使用相同的字体，则可以选择将其添加到globalStyle.js模块的injectGlobal中。

injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,900|Roboto');
  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
  h1 {
    font-family: Montserrat;
  }
`;

Then we can adjust the weight on the AppTitle component:

然后我们可以调整AppTitle组件的权重：

const AppTitle = styled.h1`
  font-weight: 900;
`;

To add the additional styles for fonts like Montserrat and Roboto you can specify them in the @import url() you'll notice that Montserrat has :400,900 after it that is specifying the styles regular (400) and black (900), you can import as many as you like from Google fonts (CDN) but the more you import the longer it will take to load them, if you have a lot of fonts and styles you want in your app then consider adding them to a folder in the project, like:

要为Montserrat和Roboto等字体添加其他样式，可以在@import url()指定它们，您会注意到Montserrat在指定常规样式(400)和黑色样式(900)之后具有:400,900 ，您可以从Google字体(CDN)导入任意多的内容，但是导入的次数越多，加载它们所需的时间就越长。如果您想要在应用程序中使用多种字体和样式，则可以考虑将其添加到项目中的文件夹中，喜欢：

import Montserrat from './fonts/Montserrat-Regular.ttf';

injectGlobal`@font-face { font-family: Montserrat; src: url(${Montserrat}); }`;

主题化 (Theming)

Themes are often used to change the look and feel of a wide range of things at once. For example, you may have a night and day mode like in Twitter. You can create your own themes in styled-components too.

主题通常用于立即改变多种事物的外观。例如，您可能有一个类似Twitter的昼夜模式。您也可以在样式化组件中创建自己的主题。

使用样式组件ThemeProvider (Use the styled-components ThemeProvider)

Now say we want to have several components in our app that use a CSS colour property color: #6e27c5 instead of hard coding it through the app for every component that uses it we can use the styled-components ThemeProvider.

现在说我们想在我们的应用程序中有几个使用CSS颜色属性color: #6e27c5而不是通过应用程序对使用它的每个组件进行硬编码，我们可以使用样式化组件ThemeProvider 。

For this we will need to import the ThemeProvider named export from styled-components, then define a theme object where our colour is going to live:

为此，我们需要从样式组件中导入名为export的ThemeProvider ，然后定义一个theme对象，该对象将ThemeProvider我们的颜色：

export const theme = {
  primary: '#6e27c5',
};

Let's add the newly created theme to the globalStyle module we created previously.

让我们将新创建的theme添加到我们先前创建的globalStyle模块中。

To make the theme object available throughout the app component we'll wrap our app component in the ThemeProvider and import our awesome theme for use in the ThemeProvider:

为了使主题对象在整个app组件中可用，我们将把app组件包装在ThemeProvider并导入很棒的主题以供ThemeProvider使用：

import React, { Component } from 'react';
import styled, { keyframes, ThemeProvider } from 'styled-components';
import logo from './logo.svg';
import { theme } from './theme/globalStyle';

// our styled-components

class App extends Component {
  render() {
    return <ThemeProvider theme={theme}>{/* all children can access the theme object */}</ThemeProvider>;
  }
}
export default App;

Now the theme properties can be used as props in our styled-components, let's change the background-color: in the AppHeader component, whilst we're at it let's add a dark: #222 property to our theme object and use that for the color property:

现在， theme属性可以用作样式组件中的道具，让我们更改background-color:在AppHeader组件中，同时为我们的theme对象添加一个dark: #222属性，并将其用于color属性：

const AppHeader = styled.div`
  height: 12rem;
  padding: 1rem;
  color: ${props => props.theme.dark};
  background-color: ${props => props.theme.primary};
`;

Now we can change our app theme globally

现在我们可以在全球范围内更改应用主题

好的，可以更改主题吗？ (Ok cool, can you change theme?)

This is what I was thinking and it turns out you can, there's a great Stack Overflow answer from Max on it.

这就是我的想法，事实证明您可以做到， Max给出了一个很好的Stack Overflow答案。

It got me thinking if you can switch between themes rather than define them for different sections like in the SO answer.

我想到了是否可以在主题之间切换，而不是像SO答案中那样为不同的部分定义主题。

I started off by defining two themes (with imaginative names) in the globalStyle.js module:

我首先在globalStyle.js模块中定义了两个主题(具有想象力的名称)：

export const theme1 = {
  primary: '#ff0198',
  secondary: '#01c1d6',
  danger: '#eb238e',
  light: '#f4f4f4',
  dark: '#222',
};

export const theme2 = {
  primary: '#6e27c5',
  secondary: '#ffb617',
  danger: '#f16623',
  light: '#f4f4f4',
  dark: '#222',
};

Now we need a way to switch between the two theme objects, let's use a select box for them, let's create a components folder and in there make a ThemeSelect.js component, we can worry about refactoring the App.js component when I'm not here :

现在我们需要一种在两个theme对象之间切换的方法，让我们为它们使用一个选择框，让我们创建一个components文件夹，然后在其中创建一个ThemeSelect.js组件，我们可以担心在重构App.js组件时不在这里：

ThemeSelect.js (ThemeSelect.js)

import React from 'react';
import styled from 'styled-components';

const Select = styled.select`
  margin: 2rem 0.5rem;
  padding: 0rem 0.5rem;
  font-family: Roboto;
  font-size: 1rem;
  border: 1px solid ${props => props.theme.light};
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: ${props => props.theme.light};
  border-radius: 2px;
`;

export const SelectOpt = styled.option`
  font-family: Roboto;
  font-size: 1rem;
`;

class ThemeSelect extends React.Component {
  render() {
    return (
      <div>
        <Select onChange={e => this.props.handleThemeChange(e)}>
          <SelectOpt value="theme1">Theme 1</SelectOpt>
          <SelectOpt value="theme2">Theme 2</SelectOpt>
        </Select>
      </div>
    );
  }
}

export default ThemeSelect;

You've probably noticed the onChange={e => this.props.handleThemeChange(e) event, we're going to add that method to the App.js component along with some state to manage what theme is selected.

您可能已经注意到onChange={e => this.props.handleThemeChange(e)事件，我们将把该方法添加到App.js组件中，并带有某种状态来管理所选主题。

App.js (App.js)

import React, { Component } from 'react';
import styled, { keyframes, ThemeProvider } from 'styled-components';

import logo from './logo.svg';

import { theme1, theme2 } from './theme/globalStyle';
import ThemeSelect from './components/ThemeSelect';

// our lovely styled-components here

class App extends Component {
  state = {
    theme: theme1,
  };
  handleThemeChange = e => {
    let theme = e.target.value;
    theme === 'theme1' ? (theme = theme1) : (theme = theme2);
    this.setState({ theme });
  };
  render() {
    return (
      <ThemeProvider theme={this.state.theme}>
        <AppWrapper>
          <AppHeader>
            <AppLogo src={logo} alt="logo" />
            <AppTitle>Welcome to React</AppTitle>
          </AppHeader>
          <AppIntro>
            Bootstrapped with <code>create-react-app</code>.
          </AppIntro>
          <AppIntro>
            Components styled with <code>styled-components</code> <EmojiWrapper aria-label="nail polish" />
          </AppIntro>
          <ThemeSelect handleThemeChange={this.handleThemeChange} />
        </AppWrapper>
      </ThemeProvider>
    );
  }
}

export default App;

To summarise what we have done with App.js here is, add some state to default to theme1 where the two themes are imported as named exports of the globalStyle.js module.

总结一下，我们在这里对App.js所做的工作是，将一些状态默认添加到theme1中，其中两个主题作为globalStyle.js模块的命名导出导入。

Add a method to handle the change of the ThemeSelect.js component handleThemeChange this is where we can switch between the two theme objects.

添加处理的变化的方法ThemeSelect.js组件handleThemeChange这是我们可以在两者之间切换theme对象。

Let's try it out, we should be able to switch between the two themes we've defined now.

让我们尝试一下，我们应该能够在我们现在定义的两个主题之间切换。

扩展样式组件 (Extending styled-components)

So far our app hasn't got many styled-components that are similar but what if we were to add some buttons…

到目前为止，我们的应用还没有很多相似的样式化组件，但是如果我们要添加一些按钮呢？

export const Button = styled.button`
  font-size: 1rem;
  border-radius: 5px;
  padding: 0.25rem 1rem;
  margin: 0 1rem;
  background: transparent;
  color: ${props => props.theme.primary};
  border: 2px solid ${props => props.theme.primary};
  ${props =>
    props.primary &&
    css`
      background: ${props => props.theme.primary};
      color: white;
    `};
`;

Here I've added a Button component to the globalStyle.js for us to use in the App.js component. For the sake of convenience we're going to add it here, you may find if you have a lot of similar components that you are reusing throughout your app that it may be a good idea to add them all to a components folder.

在这里，我向globalStyle.js添加了一个Button组件，供我们在App.js组件中使用。为了方便起见，我们将在此处添加它，您可能会发现，如果您有很多类似的组件要在整个应用程序中重复使用，则最好将它们全部添加到components文件夹中。

We can import the Button as you would any other component and use it in the module, as we're extending it this means we only need to apply the specific styles we want for that button. But first in the App.js component we can specify a normal and a primary button:

我们可以像导入其他任何组件一样导入Button并在模块中使用它，因为我们对其进行了扩展，这意味着我们只需要为该按钮应用所需的特定样式。但是首先在App.js组件中，我们可以指定一个普通按钮和一个主按钮：

<button>Normal Button</button> <button primary>Primary Button</button>

Now to specify another button with the same css as the imported button we can extend it, like in this example we'll make the button take up 40% of the screen width and make the corners more rounded:

现在，指定另一个与导入的按钮具有相同css的按钮，我们可以对其进行扩展，例如在此示例中，我们将使该按钮占据屏幕宽度的40％，并使角更圆角：

const BigButt = Button.extend`
  height: 3rem;
  font-size: 2rem;
  width: 40vw;
  border-radius: 30px;
`;

Let's also apply the theme for an underline on create-react-app and styled-components by adding in an Underline styled-component:

我们还通过添加Underline样式化组件将主题应用于create-react-app和styled-components的Underline ：

const Underline = styled.span`
  border-bottom: 4px solid ${props => props.theme.secondary};
`;

Now we can switch the theme and have it applied to our components using the theme, pretty neat, right?

现在我们可以切换主题，并使用该主题将其应用到我们的组件中，非常简洁，对吗？

I have put all of the examples we have gone over here in a working example for you to play around with the theming and styled-components, enjoy.

我将这里讨论过的所有示例都放在一个工作示例中，让您体验主题和样式化组件的乐趣。

https://codesandbox.io/s/x26q7l9vyq?from-embed

想知道更多？ (Want to know more?)

A great resource for getting started with styled-components which really helped me is Simon Vrachliotis's egghead.io styled-components playlist which is a great foundation for starting out with styled-components ? the first lesson is for pro members but the rest are currently available to watch for free.

Simon Vrachliotis的egghead.io样式组件播放列表是一个非常有用的资源，它可以帮助您开始使用样式组件。第一堂课是针对专业会员的，其余课程目前可供免费观看。

There's also the spectrum.chat community and of course Stack Overflow.

还有Spectrum.chat社区，当然还有Stack Overflow 。

谢谢阅读 (Thanks for reading )

If there is anything I have missed, or if you have a better way to do something then please let me know.

如果我错过了任何事情，或者您有更好的做某事的方法，请告诉我。

Find me on Twitter or Ask Me Anything on GitHub.

在Twitter上找到我，或者在GitHub上问我。

You can read other articles like this on my blog.

您可以在我的博客上阅读其他类似的文章。

翻译自: https://www.freecodecamp.org/news/styled-components-getting-started-2018/

样式组件化

cumian9828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式组件化_样式化的组件入门

样式组件化We're going to style the basic create react app with styled-components to look something like this: 我们将使用样式组件对基本的create react应用进行样式设置，如下所示： But first, preamble✨: I have always struggled with sty...
复制链接

扫一扫