[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;
}
}
https://github.com/react-atomic/react-atomic-molecule/blob/master/src/config/styles/rwd.js
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']
)
};
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']
]
};