zoukankan      html  css  js  c++  java
  • [React] Intro to inline styles in React components

    React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius) instead of kebab-case (border-radius). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!

    /*main.js*/
    import React from 'react';
    import Example from './example';
    
    React.render(<Example content="Button"/>, document.body);
    /*example.js*/
    
    import React, {Component} from 'react';
    import styles from './styles/styles';
    
    class Example extends Component {
        render() {
            return (
                <p style={styles}>{this.props.content} Hello</p>
            );
        }
    }
    
    Example.propTypes = {
        content: React.PropTypes.string.isRequired
    };
    
    export default Example;

    styles.js

    const baseColor = '#4D54D8';
    const borderColor = "#080E73";
    const fontColor = "white";
    
    var styles = {
        color: `${fontColor}`,
        background: `${baseColor}`,
        borderRadius: '1rem',
        border: `1px solid ${borderColor}`,
         '150px',
        height: '30px',
        fontSize: '1rem',
        textAlign: 'center'
    };
    
    export default styles;
  • 相关阅读:
    poj3016
    BZOJ2560 串珠子
    HAOI 2009 逆序对数列
    BJOI2012 最多的方案
    ZJOI2008 生日聚会
    ZJOI2008 骑士
    SCOI2003 严格N元树
    SDOI2010 地精部落
    USACO Section 3.2 Stringsobits
    JLOI2013 卡牌游戏
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4798695.html
Copyright © 2011-2022 走看看