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

  • 31 – 镭 For Media Queries In 反应

    课程清单
    [镭用于React中的媒体查询,镭用于React中的媒体查询]

    In the last lesson, we added 镭 and started using it into our button and added a pseudo selector i.e. the :hover pseudo-selector. that’s, of course, nice but we can also use radium to use media queries.
    Now although in the person Component there we have a Person class in src /人/人.css 我们当然可以轻松地添加媒体查询。但是我想展示您可以使用我们在应用程序中安装的Radium包来做到这一点,在某些情况下,您必须动态更改CSS。

    镭用于React中的媒体查询

    First we will import the 镭 package into our component and export with its method 镭().

    src / Person / Person.js
    
    ...
    import 镭 from 'radium';
    ...
    const person = props => {
      // component JSX code
    }
    export 默认 镭(person);
    

    Adding Media Query In 反应Component

    After that will add a new style const style = { } in Person.js.
    再一次,我们将使用一个特殊的选择器,它看起来确实很奇怪,但是由于Radium而起作用

    src / Person / Person.js
    
    ...
    import 镭 from 'radium';
    ...
    const person = props => {
      const style = {
          '@media (min-width: 500px)': {    // still it's a javascript property name.
            ...
          }
      }
      ...
    }
    export 默认 镭(person);
    

    @media (min-width: 500px) :由于这是一个字符串,因此有效,镭会对其进行解析,并且当然可以理解它,因为它是一种媒体查询,在伪选择器中,镭也可以理解。

    在媒体查询中添加样式

    现在,在我们的媒体查询对象中,我们可以简单地添加一些属性以对组件进行样式设置。

    src / Person / Person.js
    
    import 反应from 'react';
    import 镭 from 'radium';
    import './Person.css';
    const person = props => {
    	const style = {
    		'@media (min-width: 500px)': {
    			width: '450px',
    		},
    	};
    	return (
    		<div className="Person" style={style}>
    		...
    		</div>
    	);
    };
    export 默认 镭(person);
    

    as we can see we have a className added in our JSX code, But I also have my style which will override my class setting by 默认 的CSS rules not because of 镭.
    现在,如果我们运行该应用程序并切换按钮,您将看到一个错误,即

    Uncaught Error: To use plugins requiring `addCSS`

    我们需要将应用程序包装在样式根组件中。这是Radium提供的组件,在包装导出镭时是足够的,或者是伪选择器,用于基本上转换选择媒体选择或带有keyFrames的动画。

    包装在镭组件中的应用

    我们需要将整个应用程序包装在镭提供的特殊组件中。

    src / App.js
    
    import 镭, {StyleRoot} from 'radium';
    

    我们可以简单地从radium导入styleRoot,我们正在导入该文件的默认导出,即 然后我们导入一个命名的导出styleRoot。
    之后,我们可以简单地用它包装整个应用程序。因此,我们可以做的就是可以简单地在return语句中输入并包装<StyleRoot>

    src / App.js
    
    ...
    import 镭, {StyleRoot} from 'radium';
    ...
    class App extends Component {
      ...
      return (
    		<StyleRoot>
    			<div className="App">
    				...
    			</div>
    		</StyleRoot>
    	);
    }
    ...
    

    现在,如果您保存文件并运行该应用程序,您将可以正常运行而不会出现任何错误,并且可以通过调整浏览器窗口的大小来查看是否已应用了媒体查询。

    重要:
    仅将整个应用程序包装在根组件中<StyleRoot>镭提供的组件,以便您可以安全地访问高级功能,以像媒体查询一样调用它。
    对于伪选择器,不需要使用任何功能,在计划使用镭功能时,必须包装组件。

    反应introduction
    反应Component
    镭用于React中的媒体查询
  • 启用通知    不用了,谢谢