[React] Create component variations in React with styled-components and "extend"

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React] Create component variations in React with styled-components and "extend"相关的知识,希望对你有一定的参考价值。

In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated.

 

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

const Button = styled.button`
  background: ${props => props.theme.base};
  color: white;
  font-size: 1rem;
  padding: .75rem 2rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  margin: .5rem;
  transition: all 0.1s;
  &:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
`;

const ButtonDanger = Button.extend`background: ${props => props.theme.danger};`;
const ButtonGradient = Button.extend`
  background: ${props => props.theme.gradient};
`;

/* ============================== */
/* ===== the main component ===== */
/* ============================== */
const App = () =>
  <div>
    <Button>Basic button</Button>
    <ButtonDanger>Watch out now!</ButtonDanger>
    <ButtonGradient>Gradient Button!</ButtonGradient>
  </div>;

export default App;

 

theme:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { ThemeProvider, injectGlobal } from "styled-components";

injectGlobal`
  body {
    margin: 0;
    padding: 2rem;
    font-family: -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  }
`;

const theme = {
  base: "#a04ed9",
  danger: "tomato",
  gradient: `background-color: #00DBDE; background-image: linear-gradient(225deg, #00DBDE 0%, #FC00FF 100%);`
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

 

以上是关于[React] Create component variations in React with styled-components and "extend"的主要内容,如果未能解决你的问题,请参考以下文章

[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream

如何在 create-react-app 中创建导入快捷方式/别名?

react todoList小demo

如何在 create-react-app 中指定全局类型声明?

使用 create-react-app 创建自定义绝对路径

如何在 create-react-app 上使用“/”阻止路由