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;
  • 相关阅读:
    Features for Multi-Target Multi-Camera Tracking and Re-identification论文解读
    CBAM(Convolutional Block Attention Module)使用指南
    j2ee web项目 ssh 中使用junit测试
    log4j 发送日志到邮箱
    java.util.ConcurrentModificationException
    java 项目 报错
    json 传参数到action中 乱码
    TOMCAT 信息
    action 纯注解 笔记
    java 上传图片 打水印
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4798695.html
Copyright © 2011-2022 走看看