美文网首页
#12 覆盖默认样式

#12 覆盖默认样式

作者: 康乐芳华 | 来源:发表于2017-12-19 14:59 被阅读0次

完成一个函数 getDefaultStyledPost,这个函数接受一个表示样式的对象作为参数,返回一个组件只有 <p> 元素的组件:

const Post = getDefaultStyledPost({ color: 'red' })
<Post /> // <p>任意内容</p>,颜色为红色

渲染出来的 <p> 元素要具有 getDefaultStyledPost 所接受对象所表示的样式。此外,返回的 Post 组件还要能够接受一个 style 对象作为 props,这个对象会和原来的样式进行合并显示:

const Post = getDefaultStyledPost({ color: 'red' })
<Post style={{ color: 'blue', fontSize: '13px' }} />
<Post style={{ fontSize: '12px' }} />

上面第一个 <Post /> 渲染结果为:颜色为蓝色,字体大小为 13px
上面第二个 <Post /> 渲染结果为:颜色为红色,字体大小为 12px

const getDefaultStyledPost = (defaultStyle) => {
  /* TODO */
  return (
    class Post extends Component{
      render(){
        // 结构
        const newstyle = {...defaultStyle, ...this.props.style}
        return (
          <p style={newstyle}>Hello Kitty</p>
        )
      }
    }
  )
}

相关文章

  • #12 覆盖默认样式

    完成一个函数 getDefaultStyledPost,这个函数接受一个表示样式的对象作为参数,返回一个组件只有 ...

  • 如何覆盖element默认样式?

    一、问题 无法在自己的样式文件中编写样式覆盖 element ,开始以为是 css 层叠权重问题,但打开 Chro...

  • 如何去除苹果手机(ios)的input默认样式与input禁止键

    苹果手机input标签有默认的样式,如果不做处理,苹果默认样式将覆盖掉你自己写的样式。因此,如果安卓手机与苹果手机...

  • 利用 CSS 穿透覆盖默认样式

    常见发生场景:假如我们需要通过 input,type="file"来上传文件,而这个 input 的默认样式,可以...

  • Draft-js块级样式总结

    1.默认块级样式 draft-js源码中默认块级样式定义如下: 一共有12个默认块级样式,其中:header-on...

  • h5学习

    1. 浏览器默认样式是潜在风险,最好自定义style进行覆盖

  • 13-CSS3-3D转换模块

    长方体 注意点: 动画中如果有和默认样式中同名的属性,会覆盖默认样式中同名的属性; 在编写动画的时候,固定不变的值...

  • Layui table 超出自动换行

    layui 的table的的cell默认是超出hidden的,如果希望超出长度自动换行便需要覆盖layui的默认样式实现

  • JS小技巧

    CSS 穿透覆盖默认样式input标签 上传type="file",使用img遮盖,防止img阻隔点击事件img ...

  • iOS14适配

    UIDatePicker 样式默认改变 xcode12 UIDatePicker 需要加入 preferredDa...

网友评论

      本文标题:#12 覆盖默认样式

      本文链接:https://www.haomeiwen.com/subject/sdobwxtx.html