[React] Create component variations in React with styled-components and "extend"
2017-08-17 02:53
337 查看
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.
theme:
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] Animate your user interface in React with styled-components and "keyframes"
- [React] Style the body element with styled-components and "injectGlobal"
- [React] Theme your application with styled-components and "ThemeProvider"
- [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
- [React] Style a React component with styled-components
- Create an avatar and chat with your friends in rooms you design
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
- [React] Stop Memory Leaks with componentWillUnmount Lifecycle Method in React
- [React] Create a queue of Ajax requests with redux-observable and group the results.
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- How to create aligned partitions in Linux for use with NetApp LUNs, VMDKs, VHDs and other virtual di
- Populate A List Item With Record Group In Oracle Forms Using Populate_List And Create_Group_From_Query Command
- [React Native] Writing Platform-Specific Components for iOS and Android in React Native
- one command to delete all files with name "filename" in current dir and all its sub-dirs
- Populate A List Item With Record Group In Oracle Forms Using Populate_List And Create_Group_From_Query Command
- [React Native] Installing and Linking Modules with Native Code in React Native
- MSBuild could not create or connect to a task host with runtime "CLR2" and architecture "x86".
- What is a "sosreport" and how do I create it in Red Hat Enterprise Linux 4.6 and later
- [引用]SQL Server 2005 Books Online How to: Create a Job with Steps and a Schedule in Visual Basic .NET
- [CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables