ant-design / antd-style Goto Github PK

控制台输出：
cx(label): acss-17f3slo
styles.label: acss-1o3nxki-pages-Home-label

const useStyles = createStyles(({ css, cx }) => {
  const label = css`
    color: red;
  `;

  const box1 = css`
    &:hover {
      font-weight: 600;

      .${cx(label)} {
        color: green;
      }
    }
  `;

  const box2 = css`
    &:hover {
      font-weight: 600;

      .${cx(label)} {
        color: blue;
      }
    }
  `;

  console.log('cx(label):', cx(label));

  return {
    box1,
    box2,
    label,
  };
});

const Home: React.FC = () => {
  const { styles } = useStyles();

  console.log('styles.label:', styles.label);

  return (
    <>
      <div className={styles.box1}>
        <span className={styles.label}>box1-lable</span>
      </div>
      <div className={styles.box2}>
        <span className={styles.label}>box2-lable</span>
      </div>
    </>
  );
};

ERROR in ./node_modules/core-util-is/lib/util.js 86:0-52
Module not found: Error: Can't resolve 'buffer' in '/projects/node_modules/core-util-is/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

ERROR in ./node_modules/duplexer2/node_modules/safe-buffer/index.js 2:13-30
Module not found: Error: Can't resolve 'buffer' in '/projects/node_modules/duplexer2/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

ERROR in ./node_modules/multipipe/index.js 6:18-47
Module not found: Error: Can't resolve 'stream' in '/projects/node_modules/multipipe'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/readable-stream/lib/_stream_readable.js 29:13-37
Module not found: Error: Can't resolve 'buffer' in '/projects/node_modules/readable-stream/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

ERROR in ./node_modules/readable-stream/lib/_stream_readable.js 41:13-30
Module not found: Error: Can't resolve 'stream' in '/projects/node_modules/readable-stream/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/readable-stream/lib/_stream_writable.js 29:13-37
Module not found: Error: Can't resolve 'buffer' in '/projects/node_modules/readable-stream/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

ERROR in ./node_modules/readable-stream/lib/_stream_writable.js 39:13-30
Module not found: Error: Can't resolve 'stream' in '/projects/node_modules/readable-stream/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/readable-stream/readable.js 1:13-30
Module not found: Error: Can't resolve 'stream' in '/projects/node_modules/readable-stream'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/readable-stream/readable.js 10:2-36
Module not found: Error: Can't resolve 'stream' in '/projects/node_modules/readable-stream'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/string_decoder/index.js 22:13-37
Module not found: Error: Can't resolve 'buffer' in '/projects/node_modules/string_decoder'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

ERROR in ./node_modules/through/index.js 1:13-30
Module not found: Error: Can't resolve 'stream' in '/projects/node_modules/through'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

.button-wrapper {
  margin-top: 24px;

  ${buttonClass} {
    font-size: 20px;
  }
}

const useStyles = createStyles(({ css }) => {
  const buttonClass = css`
    background-color: #3498db;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 12px 24px;

    &:hover {
      background-color: #2980b9;
    }
  `

  const containerClass = css`
    display: flex;
    flex-direction: column;
    align-items: center;

    .button-wrapper {
      margin-top: 24px;

      ${buttonClass} {
        font-size: 20px;
      }
    }
  `
  return {
    buttonClass,
    containerClass,
  }
})

function MyComponent() {
 const { styles } = useStyles()

  return (
    <div className={styles.containerClass}>
        <p>Some content here</p>
        <div className="button-wrapper">
          <button className={styles.buttonClass}>Click me</button>
        </div>
      </div>
  );
}

import { legacyLogicalPropertiesTransformer } from "@ant-design/cssinjs";

<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}}></StyleProvider>