0

I have a piece of code in react where in line style works as expected:

render() {
    return (
        <div style={{ fontSize: 48 }}>LOLOLO</div>
    )
}

But if I use index.css (where .me { font-size: 48 } is defined), the follows has no effect

import styles from './index.css'
render() {
    return (
        <div className={styles.me}>LILILILALALA</div>
    )
}

Does anyone know what may be the problem?

PS: tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
  • If you're using the CRA, then `example.(s)css` is global, whereas `Example.module.s(c)ss` is an importable CSS module. Click [here](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/) for more info. – Matt Carlotta Jun 06 '20 at 03:05
  • I changed the file name to `index.module.css` and `import styles from "./index.module.css"`, it worked. You could post an answer if you like so that I could accept... – SoftTimur Jun 06 '20 at 05:26
  • A similar [post](https://stackoverflow.com/a/61849714/2873538). – Ajeet Shah Jun 06 '20 at 05:55

1 Answers1

0

This should work:

import './index.scss'
render() {
    return (
        <div className="me">LILILILALALA</div>
    )
}
Pavel Petrovich
  • 734
  • 10
  • 9