rsnext/examples/with-styled-jsx-scss/pages/index.tsx
Max Proske 8eb82b3891
Convert more jsx/styled-components examples to TypeScript (#43117)
Converted 3 more examples to TypeScript. Individual contributions pushed as separate commits.

## Documentation / Examples

- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-11-23 05:45:26 +00:00

26 lines
539 B
TypeScript

const backgroundColor = '#eee'
export default function Home() {
return (
<div className="hello">
<p>Hello World</p>
<style jsx>{`
$color: red;
.hello {
background-color: ${backgroundColor};
padding: 100px;
text-align: center;
transition: 100ms ease-in background;
&:hover {
color: $color;
}
@media only screen and (max-width: 480px) {
font-size: 20px;
}
}
`}</style>
</div>
)
}