×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 27 – Outlining the Problem Set For Styling In 反应

    课程清单
    [概述React样式问题集,概述React样式问题集]

    介绍

    在本模块中,我想重点介绍对React组件进行样式设置,因为到目前为止,它的功能远远超出您要解决的内容。对于我,我想看看如何动态调整样式或类名,并且还想向您展示如何解决这种限制,避免曾经使用内联样式并因此限制了样式,但是有一些限制,例如无法使用媒体查询或伪选择器,或使用CSS文件且具有全局样式的方法,有两种处理方法,在本课程模块中,将深入探讨所有使用样式的方法。


    问题集

    我回到了到目前为止我们从事的项目。我们在那里有了一些基本的样式,例如,这些卡在其中输出人员和按钮。
    让我们从按钮开始,例如,当我们将鼠标悬停在按钮上时,已经有一个问题,它不会改变样式。
    当我们使用jsvsdcript对象在JSX代码中创建样式时,React会考虑将该对象设置为实际的HTML元素。问题是我们不能在那里使用伪选择器。

    src / App.js
    
    ...
    render(){
      const style = {
        background: '#ededed',
        font: 'inherit',
        border: '1px solid black',
        padding: '8px',
        borderRadius: '4px',
        boxShadow: '0 2px 3px #ccc',
      };
      return (
        <div className="App">
          <button style={style} onClick={this.togglePersonsHandler}>
            Toggle Person
          </button>
        </div>
      );
    }
    ...
    

    this advantage of core is the styling only applies on ut to that button and not to other buttons on the application if we had another button, and I already mentioned the alternative would be to style it in 的CSS file and there we can use normal 的CSS including pseudo selector button:hover{} but this will globally affect all buttons in our application even they are placed in other components.
    这是我要在本模块中处理的问题集,但除此之外,我还想看看其他内容……
    如果我们想动态更改样式,那我们先开始吧。

    可以说“切换人物”按钮应具有 绿色 背景颜色,如果我们要向用户显示单击和 背景颜色(如果我们要删除人员列表)。
    让我们看看如何在下一课中动态更改样式…

    反应introduction
    反应Component
    概述React中样式设置的问题集
  • 启用通知    不用了,谢谢