Skip to content

[React Style] how to create media query CSS?

Hill Liu edited this page Mar 6, 2022 · 7 revisions
@media (min-width: 48em) {
   .home-menu ul {
      float: right;
   }
}

RWD config

https://github.com/react-atomic/react-atomic-molecule/blob/master/src/config/styles/rwd.js

With React Style

import {min, reactStyle, SemanticUI} from 'react-atomic-molecule';
import React from 'react';

const App = props =>
<SemanticUI styles={Styles.menu} />

const Styles = {
   menu: reactStyle(
      {float: 'right'},
      [min.md, '.home-menu ul']
   )
};

With laze inject

import {min, lazyInject, SemanticUI} from 'react-atomic-molecule';
import React, {PureComponent} from 'react';

class App extends PureComponent
{
  constructor(props)
  {
     super(props);
     injects = lazyInject( InjectStyles, injects );
  }

  render()
  {
      return <SemanticUI styles={injects.menu} />;
  }
}

let injects;
const InjectStyles = {
  menu: [
    {float: 'right'},
    [min.md, '.home-menu ul']
  ]
};