CSS Modules VS. styled-components，哪个才是解决 CSS 不足之处的更好方案？

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'index.js',
    path: path.resolve('./dist'),
    libraryTarget: 'umd'
  },

  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') },
      { test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
    ]
  },

  postcss: [
    require('autoprefixer-core'),
    require('postcss-color-rebeccapurple')
  ],

  resolve: {
    modulesDirectories: ['node_modules', 'components']
  },

  plugins: [
    new ExtractTextPlugin('style.css', { allChunks: true }),
    new ReactToHtmlPlugin('index.html', 'index.js', {
      static: true,
      template: ejs.compile(fs.readFileSync(__dirname + '/src/template.ejs', 'utf-8'))
    })
  ]
};
复制代码

{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }
复制代码

// App.css
.appTitle {
    color: red;
}
复制代码

// APP.jsx
import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className={styles['appTitle']}>
      Hello World
    </h1>
  );
};
复制代码

// 驼峰式
<h1 className={styles['appTitle']}> // 🉑️
<h1 className={styles.appTitle}> // 同样🉑️

// kebab-casing
<h1 className={styles['app-title']}> // 🉑️
<h1 className={styles.app-title}> // 不🉑️，会导致错误
复制代码

<h1 class="App__appTitle__GyYTO">
  Hello World
</h1>
复制代码

.App__appTitle__GyYTO {
  color: red;
}
复制代码

// App.css
.appTitle {
	color: red;
}

:local(.appTitle1) {
  color: yellow;
}


:global(.globalTitle){
	color: green;
}
复制代码

import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className={styles['appTitle']}>
      Hello World
    </h1>
    <h1 className = "globalTitle">
       Hello World Again
    </h1>
  );
};
复制代码

.App__appTitle__GyYTO {
  color: red;
}

.App__appTitle1__NHgyT {
  color: yellow;
}

// 全局类名不会被编译为哈希类名
.globalTitle {
    color: green;
}
复制代码

// App.css
.appTitle {
    color: red;
}

.appBackground {
    color: blue;
}

.appStyle {
    composes: appTitle appBackground; // 不同类之间用空格隔开
    padding: 8px;
}
复制代码

// 编译后的 App.css
.App__appTitle__GyYTO {
  color: red;
}

.App__appBackground__NhvyT {
  color: yellow;
}

.App__appStyle__dahOP {
  border: 1px solid black;
}
复制代码

import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className={styles['appStyle']}>
      Hello World
    </h1>
  );
};
复制代码

<h1 className="App__appTitle__GyYTO App__appBackground__NhvyT App__appStyle__dahOP">
复制代码

/* another.css */
.ohterBackground {
  background-color: blue;
}

/* App.css */
.appStyle {
  composes: ohterBackground from './another.css';
  color: red;
}
复制代码

/* another.css */
.ohterBackground {
  background-color: blue;
}

/* another1.css */
.ohter1Background {
  background-color: grey;
}

/* App.css */
.appStyle {
  composes: ohterBackground from './another.css';
  composes: ohter1Background from './another1.css'; // 不要这样做，会导致最终的 background-color 不可预测
  color: red;
}
复制代码

// 循环依赖会导致错误，不要这样做！！
/* another.css */
.ohterBackground {
  composes: appStyle from './App.css';
  background-color: blue;
}

/* App.css */
.appStyle {
  composes: ohterBackground from './another.css'; // 形成了循环依赖
  color: red;
}
复制代码

/* global.css */
:global(.globalBackground){
    color: green;
}

/* App.css */
.appStyle {
  composes: globalBackground from './global.css';
  color: red;
}
复制代码

/* colors.css */
@value primary: #BF4040;
@value secondary: #1F4F7F;

.text-primary {
  color: primary;
}

.text-secondary {
  color: secondary;
}

/* breakpoints.css */
@value small: (max-width: 599px);
@value medium: (min-width: 600px) and (max-width: 959px);
@value large: (min-width: 960px);


/* App.css */
/* alias paths for other values or composition */
@value colors: "./colors.css";
/* import multiple from a single file */
@value primary, secondary from colors;
/* make local aliases to imported values */
@value small as bp-small, large as bp-large from "./breakpoints.css";
/* value as selector name */
@value selectorValue: secondary-color;

.selectorValue {
  color: secondary;
}

.header {
  composes: text-primary from colors; // colors 是 "./colors.css" 的别名
  box-shadow: 0 0 10px secondary;
}

@media bp-small {
  .header {
    box-shadow: 0 0 4px secondary;
  }
}
@media bp-large {
  .header {
    box-shadow: 0 0 20px secondary;
  }
}
复制代码

# install with npm
npm install --save styled-components

# install with yarn
yarn add styled-components
复制代码

import React from 'react';
import styled from 'styled-components';

const ScH1 = styled.h1`
    color: red;
    background-color: blue;
    text-align: center;
    padding: 10px;
`;

export default () => {
  return (
    <ScH1>
        Hello World
    </ScH1>
  );
};

复制代码

// ❌ 绝对不要这样写
const Header = () => {
  const Title = styled.h1`
    font-size: 10px;
  `

  return (
    <div>
      <Title />
    </div>
  )
}

// ✅应该要这样写
const Title = styled.h1`
  font-size: 10px;
`

const Header = () => {
  return (
    <div>
      <Title />
    </div>
  )
}
复制代码

# 与 TypeScript 配合使用
$ npm install @types/styled-components -D
复制代码

import React, {
  ButtonHTMLAttributes
} from 'react';
import styled from 'styled-components';

interface IScButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    primary?: boolean;
}

const ScWrapper = styled.div`
    margin-top: 12px;
`;

const ScButton = styled.button<IScButtonProps> `
    background: ${props => props.primary ? "blue" : "white"};
    color: ${props => props.primary ? "white" : "blue"};
    border: 2px solid palevioletred;
    border-radius: 3px;
    padding: 0.25em 1em;
`;

export default () => {
  return (
   <ScWrapper>
       <ScButton>Normal</ScButton>
       <ScButton primary>Primary</ScButton>
  </ScWrapper>
  );
};
复制代码

const ScButton = styled.button`
    color: white;
    background-color: blue;
    border: 2px solid palevioletred;
    border-radius: 3px;
    padding: 0.25em 1em;
`;

// 创建一个继承 ScButton 的新组件 ScExtendedButton
const ScExtendedButton = styled(ScButton)`
    color: blue;
    background-color: white;
    margin-top: 1em;
`;
复制代码

// 创建一个继承 ScButton 的新组件 ScExtendedButton，最终会渲染为 a 元素
const ScExtendedButton = styled(ScButton)`
    color: blue;
    background-color: white;
`;

const ReversedTextButton = (children, ...props) => <Button {...{
    children: children.spilit('').reverse().join(''),
    ...props
  }} />

export default () => {
    return (
        <ScExtendedButton as="a" href="#">
            Extends Link with Button styles
        </ScExtendedButton>
        {/* as 属性可以是自定义组件 */}
        <ScExtendedButton as="ReversedTextButton">
            Extends Component with Button styles
        </ScExtendedButton>
     )
}
复制代码

// 在自己创建的组件上运行
const Link = ({ className, children }) => (
  // className 属性附加到 DOM 元素
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: red;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled Link</Link>
    <br />
    <StyledLink>Styled Link</StyledLink>
  </div>
);
复制代码

import {
    Button
} from '@alifd/next';

const ScButton = styled(Button)`
    margin-top: 12px;
    color: green;
`;

render(
    <div>
        <ScButton>Styled Fusion Button</ScButton>
    </div>
);
复制代码

const ScDiv = styled.div`
   color: blue;

  &:hover {
    color: red; // 被 hover 时的样式
  }

  & ~ & {
    background: tomato; // ScDiv 作为 ScDiv 的 sibling
  }

  & + & {
    background: lime; // 与 ScDiv 相邻的 ScDiv
  }

  &.something {
    background: orange; // 带有 class .something 的 ScDiv
  }

  .something-child & {
    border: 1px solid; // 不带有 & 时指向子元素，因此这里表示在带有 class .something-child 之内的 ScDiv
`;

render(
  <React.Fragment>
    <ScDiv>Hello world!</ScDiv>
    <ScDiv>How ya doing?</ScDiv>
    <ScDiv className="something">The sun is shining...</ScDiv>
    <ScDiv>Pretty nice day today.</ScDiv>
    <ScDiv>Don't you think?</ScDiv>
    <div className="something-else">
      <ScDiv>Splendid.</ScDiv>
    </div>
  </React.Fragment>
)
复制代码

const ScInput = styled.input.attrs(props => ({
  // 定义静态的 prop
  type: "text",

 // 定义动态的 prop
  size: props.size || "1em"
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* 注意，最终组件的 props 是合并 attrs 返回值的 props 的结果 */
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

render(
  <div>
    <ScInput placeholder="A small text input" />
    <br />
    <ScInput placeholder="A bigger text input" size="2em" />
  </div>
);
复制代码

const ScInputInner = styled.input.attrs(props => ({
  type: "text",
  size: props.size || "1em"
}))`
  border: 2px solid palevioletred;
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

// ScInputInner 的 attrs 将被先应用，然后是这个 ScInputOutter 的 attrs 被应用
const PasswordInput = styled(Input).attrs({
  // 这会覆盖 ScInputInner 的 type: text
  type: "password" 
})`
  /* 同样，这会覆盖 ScInputInner 的 border*/
  border: 2px solid aqua;
`;
复制代码

// 通过使用 props.theme 可以访问到 ThemeProvider 传递下来的对象
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// 为 Button 指定默认的主题
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button>Normal</Button>
    // 采用了 ThemeProvider 提供的主题的 Button
    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);
复制代码

const ScButton = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};
`;

const theme = {
  fg: "palevioletred",
  bg: "white"
};

const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

render(
  // ThemeProvider 未定义的情况
  <ScButton theme={{
    	fg: 'red',
      bg: 'white'
    }}>Default Theme</ScButton>
  <ThemeProvider theme={theme}>
    <div>
      <ScButton>Default Theme</ScButton>
    	// theme 接收的是一个函数，函数的参数是父级的 theme
      <ThemeProvider theme={invertTheme}>
        <ScButton>Inverted Theme</ScButton>
      </ThemeProvider>
      // 覆盖 ThemeProvider的 theme
      <ScButton theme={{
        fg: 'red',
      	bg: 'white'
        }}>Override Theme</ScButton>
    </div>
  </ThemeProvider>
);
复制代码

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>


<MyComponent
  css="padding: 0.5em 1em;"
/>
复制代码

import styled, {
     css
} from 'styled-components';
import {
    Button as FusionButton
} from '@alifd/next';


const mixinCommonCSS = css`
    margin-top: 12px;
    border: 1px solid grey;
    borde-radius: 4px;
`;

const ScButton = styled.button`
    ${mixinCommonCSS}
    color: yellow;
`;

const ScFusionButton = styled(FusionButton)`
    ${mixinCommonCSS}
    color: blue;
`;
复制代码

// 计算标识符
counter++;
const componentId = 'sc-' + hash('sc' + counter); // 这就是一开提到的附加到组件上的类名 sc- 的计算方式，因为使用了 hash 算法，因此可以确保唯一
复制代码

// 注意这个 data-styled-components
<style data-styled-components>
  /* sc-component-id: sc-bdhhai */
</style>
复制代码

StyledComponent.componentId = componentId;
StyledComponent.target = TargetComponent;
复制代码

const ScButton = styled.button`
  font-size: ${({ sizeValue }) => sizeValue + 'px'};
  color: coral; 
  padding: 0.25rem 1rem; 
  border: solid 2px coral; 
  border-radius: 3px;
  margin: 0.5rem;
  &:hover {
    background-color: bisque;
  }
`;

ReactDOM.render(
  <ScButton sizeValue={24}>I'm a button</ScButton>,
  document.getElementById('root')
);
复制代码

font-size: 24px; // sizeValue 用 props 传递的 24 
color: coral; 
padding: 0.25rem 1rem; 
border: solid 2px coral; 
border-radius: 3px;
margin: 0.5rem;
&:hover {
  background-color: bisque;
}
复制代码

const className = hash(componentId + evaluatedStyles);
复制代码

const selector = '.' + className;
const cssStr = stylis(selector, evaluatedStyles);
复制代码

.jsZVzX {
  font-size: 24px;
  color: coral;
  padding: 0.25rem 1rem;
  border: solid 2px coral;
  border-radius: 3px;
  margin: 0.5rem;
}

.jsZVzX:hover{
  background-color: bisque;
}
复制代码

<style data-styled-components> 
/* sc-component-id: sc-bdhhai */ 
.sc-bdVaJa {} 
.jsZVzX{font-size:24px;color:coral; ... } 
.jsZVzX:hover{background-color:bisque;} 
</style>
复制代码

const TargetComponent = this.constructor.target; // In our case just 'button' string.
const componentId = this.constructor.componentId;
const generatedClassName = this.state.generatedClassName;

return ( 
  <TargetComponent 
    {...this.props} 
    className={this.props.className + ' ' + componentId + ' ' + generatedClassName}
  />
);
复制代码

let sizeValue = 24;

const updateButton = () => {
  ReactDOM.render(
    <ScButton sizeValue={sizeValue} onClick={updateButton}>
      Font size is {sizeValue}px
    </ScButton>,
    document.getElementById('root')
  );
  sizeValue++;
}

updateButton();
复制代码

<style data-styled-components>
  /* sc-component-id: sc-bdVaJa */
  .sc-bdhhai {} 
  .jsZVzX{font-size:24px;color:coral; ... } .jsZVzX:hover{background-color:bisque;}
  .kkRXUB{font-size:25px;color:coral; ... } .kkRXUB:hover{background-color:bisque;}
  .jvOYbh{font-size:26px;color:coral; ... } .jvOYbh:hover{background-color:bisque;}
  .ljDvEV{font-size:27px;color:coral; ... } .ljDvEV:hover{background-color:bisque;}
</style>
复制代码

const Button = styled.button.attrs({
  style: ({ sizeValue }) => ({ fontSize: sizeValue + 'px' })
})`
  color: coral;
  padding: 0.25rem 1rem; 
  border: solid 2px coral; 
  border-radius: 3px;
  margin: 0.5rem;
  &:hover {
    background-color: bisque;
  }
`;
复制代码

// styled-componnets
<TicketName></TicketName>

// CSS Modules
<div className={styles.ticketName}></div>
复制代码

// styled-components
const ScButton = styled.button`
  background: ${props => props.primary ? '#f00' : props.secondary ? '#0f0' : '#00f'};
  color: ${props => props.primary ? '#fff' : props.secondary ? '#fff' : '#000'};
  opacity: ${props => props.active ? 1 : 0};
`;

<ScButton primary />
<ScButton secondary />
<ScButton primary active={true} />
复制代码

// & 基于 CSS 预处理器的能力
button {
  background: #00f;
  opacity: 0;
  color: #000;
  
  &.primary,
  &.seconary {
    color: #fff;
  }
  &.primary {
    background: #f00;
  }
  &.secondary {
    background: #0f0;
  }
  &.active {
    opacity: 1;
  }
}
复制代码