CSS styles

The framework supports the following styles by default

  • Css Basic CSS style support
  • Scss A popular CSS preprocessor that extends CSS with features such as variables, nested rules, and mixins
  • Module.scss Create modular CSS classes to avoid naming conflicts and improve maintainability
  • CSS-in-JS Use JavaScript to write CSS styles

Configure global styles

  • You can import css or sass in the layout.js file to configure global styles
  • Use Module.scss to prevent style conflicts
  • Execute npm i @emotion/styled in the terminal to install @emotion/styled
my-nodestack-app
├── src
│   ├── pages
│   │   │── style      
│   │   │   │── layout.js   
│   │   │   │── index.js   
│   │   │   │── about.js  
│   │   │   │── contact.js   
│   │   │   │── compontents
│   │   │   |   │── about.modules.scss     
│   │   │   |   │── contact.style.js  
│   │   │   |   │── global.scss  
├── ndsk.config.js
└── package.json

import './compontents/global.scss';
export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>style</title> 
        </head>
        <body>
            <div><a href="/style/index">to app index</a></div>
            <div><a href="/style/about">to app about</a></div>
            <div><a href="/style/contact">to app contact</a></div>
            {props.children}
        </body>
      </html>
    );
}

export default ()=>(
    <h1>index</h1>
)

import Style from './compontents/about.module.scss'
export default ()=>(
    <div className={Style.root}>
        <h1>about</h1>
    </div>
)

import Style from './compontents/contact.style.js'
export default ()=>(
    <Style>contact</Style>
)

h1 {
    color: red;
}

.root{
    :global{
        h1{
            color: green;
        }
    }
}

import Styled from '@emotion/styled';
export default (props)=>{
    const Style = Styled.h1({ 
        color:'blue'
    });
    return <Style>{props.children}</Style>
}

  • In the above example, global.scss is imported into layout.js and the global style of the h1 tag is defined as red. Then, about.module.scss is imported into about.js to define the style of h1 of the current page as green. contact.style.js is imported into contact.js and the style of h1 is defined as blue.

  • Click here View Scss documentation

  • Click here View @emotion/styled documentation

  • 访问 http://localhost:3000/style

Use with UI component library

Use Material UI component library

  • Run npm i @mui/material in the terminal to install mui
my-nodestack-app
├── src
│   ├── pages
│   │   │── mui      
│   │   │   │── layout.js   
│   │   │   │── index.js 
├── ndsk.config.js
└── package.json

import createCache from '@emotion/cache';
createCache({ key:'css' });
export default (props)=>{
    return (
      <html>
        <head>
          <title>my app</title>
        </head> 
        <body> 
          {props.children}
        </body>
      </html>
    );
}

import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
export default (props)=>{
    const [age, setAge] = React.useState('');

    const handleChange = (event) => {
      setAge(event.target.value);
    };
    
    return (
      <Box sx={{ minWidth: 120 }}>
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Age</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={age}
            label="Age"
            onChange={handleChange}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </Box>
    );
}
  • As shown above: Just add the following two lines of code in layout.js
import createCache from '@emotion/cache';
createCache({ key:'css' });

Next

Static resources