How to use @emotion/react - 2 common examples

To help you get started, we’ve selected a few @emotion/react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github emotion-js / emotion / scripts / ssr-benchmarks / basic.js View on Github external
let CssPropTriangle = createTriangle(({ x, y, size, color, ...props }) => {
  return jsx('div', {
    css: css`
      position: absolute;
      cursor: pointer;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-top-width: 0;
      transform: translate(50%, 50%);
      margin-left: ${x + 'px'};
      margin-top: ${y + 'px'};
      border-right-width: ${size / 2 + 'px'};
      border-bottom-width: ${size / 2 + 'px'};
      border-left-width: ${size / 2 + 'px'};
      border-bottom-color: ${color};
    `,
github golangci / golangci-lint / docs / src / @rocketseat / gatsby-theme-docs / src / styles / global.js View on Github external
export default function GlobalStyle() {
  const theme = useTheme();

  return (
    <Global
      styles={css`
        @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

        *,
        *::after,
        *::before {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        *::selection {
          background: ${lighten('0.35', '#737380')}!important;

@emotion/react

> Simple styling in React.

MIT
Latest version published 1 month ago

Package Health Score

92 / 100
Full package analysis

Popular @emotion/react functions

Popular JavaScript code snippets

Find secure code to use in your application or website