[EuiTitle] size prop not working when having css prop

[Alecton4]

Key information

• EUI version: 88.5.3
• React version: 18.2.0
• Build tool: Vite

Usage question

The size prop is ignored even when an empty css prop is applied. Is this behavior expected? I wish to have size="l" and css={{textAlign: "center"}} work together.

Minimum reproducible sandbox

https://codesandbox.io/s/compassionate-framework-2t8vnn?file=/demo.tsx

export const Demo = () => (
  <EuiFlexGroup direction="column" alignItems="center">
    <EuiTitle size="l">
      <strong>{"This is a title"}</strong>
    </EuiTitle>
    <EuiTitle size="l" css={{}}>
      <strong>{"This is a title"}</strong>
    </EuiTitle>
  </EuiFlexGroup>
);

[cee-chen]

EuiTitle itself is merging the css prop correctly. For your specific CodeSandbox example, it's missing a JSX pragma needed to make the css prop work:

https://codesandbox.io/s/nice-panka-7rtllh?file=/demo.tsx:0-39

If you're using the css prop in a local React app outside CodeSandbox, you'll need to make sure you have the correct babel setup or JSX pragma for Emotion. Please see https://emotion.sh/docs/css-prop for more information.

[Alecton4]

@cee-chen Thanks for help! This was the first time I learned this pragma thing. After adding the /** @jsxImportSource @emotion/react */ pragma, the title works great.

However some other components changed in style, and I need to learn how to adjust further. If you have time, could you suggest some more readings and references on the impact of having/not having the pragma? Thanks!

[cee-chen]

could you suggest some more readings and references on the impact of having/not having the pragma? Thanks!

Emotion's docs are the canonical source for that kind of information - I find myself going back to them often. For troubleshooting specific issues with your setup, I'd suggest searching through Emotion's GitHub repo (particularly their open/closed issues) - it's likely other devs have run into the same problems as well.