Comments (30)
I was able to fix it with:
// custom.d.ts
import 'react';
declare module 'react' {
interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
jsx?: boolean;
global?: boolean;
}
}
from styled-jsx.
I took advice from @timsuchanek and simply put this in my code, in typings/styled-jsx.d.ts
import 'react'
// Augmentation of React
declare module "react" {
interface HTMLProps<T> {
jsx?: boolean;
global?: boolean;
}
}
It works like a charm!
from styled-jsx.
@giuseppeg This issue could be closed as DefinitelyTyped/DefinitelyTyped#22516 was merged and typings already available under @types/styled-jsx
from styled-jsx.
Aren't people usually including something like @types/styled-jsx
? Otherwise we have to support TS, Flow, etc whatever comes next
from styled-jsx.
@Hotell Indeed, so first I'm transpiling with "jsx": "preserve"
set in the .tsconfig and then running babel over it.
Using webpack that's just babel-loader!awesome-typescript-loader
from styled-jsx.
@timsuchanek - Just want to say a belated thanks for your "jsx": "preserve"
tip. I'm using Typescript + Webpack + Babel locally, and couldn't figure out why my other plugins were firing, but not styled-jsx.
Of course, it was because Typescript was already transforming JSX -> React.createElement
, so this plugin didn't have the original JSX to parse.
IMO, this could do with being featured under a 'Using with Typescript' section in the readme.
from styled-jsx.
@nikvm the issue is that that makes me think the component is standalone, but in reality it requires transpilation. It's actually less intuitive.
Good discussion to have though
from styled-jsx.
Thank you @smeijer
I was able to fix it with:
// custom.d.ts import 'react'; declare module 'react' { interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> { jsx?: boolean; global?: boolean; } }
from styled-jsx.
Hi, I installed @types/styled-jsx
and errors is gone. However, the style is not reflected in the next app. Can someone help me figure this out, please🙏 If I add global
, style is reflected, but I would like to avoid.
My tsconfig.json is:
{
"compilerOptions": {
"jsx": "react-native",
"module": "commonjs",
"strict": true,
"target": "es2017",
"sourceMap": true
}
}
The component which style is not applied is this file: https://github.com/1kohei1/sd-scheduler/blob/master/front/components/MyLayout.tsx
from styled-jsx.
hei, i'm using CRA typescript template.
i've tried "jsx": "preserve"
, and this
// custom.d.ts
import "react";
declare module "react" {
interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
jsx?: boolean;
global?: boolean;
}
}
however i'm getting
Warning: Received `true` for a non-boolean attribute `jsx`.
If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.
...
any other workarounds?
ty
from styled-jsx.
Yes, @types/styled-jsx
would be the way to go, however in my understanding the current version of TypeScript doesn't support "merging of Interfaces in namespaces", which needs to be done, because the according interface of the <style>
element in @types/react
is in a namespace.
So I see as a current approach only adding it to the @types/react
types until that merging issue is resolved.
I have created a pull request for the react types, lets see how that works out.
DefinitelyTyped/DefinitelyTyped#14198
from styled-jsx.
That brings up the question if styled-jsx
shouldn't be used like:
import Style from 'styled-jsx/component'
const IAmRed = () => (
<div>
<p>I'm red</p>
<Style>{`p { color: red; }`}</Style>
<Style global>{`body { background: white; }`}</Style>
</div>
)
This might be more according to React standards and doesn't interfere with native elements.
from styled-jsx.
@1kohei1 you are trying to pass className
to components and not DOM elements. styled-jsx
doesn't transform such things. But you can use this workaround to pass them explicitly.
from styled-jsx.
Has anyone managed to use styled-jsx with typescript and CSS in separate file?
Here it looks like they did that, but it doesn't work for me, I'm not sure this test really passed.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/1fef13d8905124003d7511a03e89d1c5e60ba4d6/types/styled-jsx/styled-jsx-tests.tsx
I get the same error like mentioned in the referenced issue #381
from styled-jsx.
@cmnstmntmn I struggled with the same issue. I am using create-react-library, so my solution might work for you as well. For me, the combination that seemed to work was the two fixes that you use above, plus adding a .babelrc
to the root of my project with the following contents:
{
"plugins": ["styled-jsx/babel"]
}
Hope this works for you as well. I spent many hours banging my head against this one before coming up with something that appears to work...
from styled-jsx.
Aren't people usually including something like @types/styled-jsx?
Yep flow, closure compiler and I suppose TS support external declarations
from styled-jsx.
sry for off topic, but how are u using it with typescript @timsuchanek ? you are double transpiling? TS -> Babel ( because according to docs, you need babel styled-jsx plugin )
from styled-jsx.
Thanks for the explanation @timsuchanek. Couldn't figure out why it wasn't working, reconfigured webpack to let babel do the jsx transpiling, not awesome-typescript-loader, like you described, working great now.
from styled-jsx.
Regarding to typescript and styled-jsx
, any idea how to fix this one?
<style jsx>
</style>
Error:(38, 16) TS2339:Property 'jsx' does not exist on type
'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.
from styled-jsx.
@nikvm can it actually be used like that? I’m searching for a solution that does not require Babel and can go pure Typescript
from styled-jsx.
Hi, thanx for the fix, but I can't make it work.
My tsconfig.json
is:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"jsx": "react",
"allowJs": true,
"typeRoots": [
"node_modules/@types",
"./typings"
]
},
"exclude": [
"next.config.js"
]
}
I'm very fresh with typescript, sorry for bothering
from styled-jsx.
Now,I have resolve the error "Property 'jsx' does not exist on type ".But I still can not make styled-jsx work with the awesome-typescript-loader.My webpack.config.js is showed below:
{ test:/\.tsx?$/, use:[ "babel-loader", "awesome-typescript-loader" ] }
from styled-jsx.
check out DefinitelyTyped/DefinitelyTyped#22181
from styled-jsx.
added more typings in this PR. Would appreciate @giuseppeg's review
extension of react style
Element supporting jsx
and global
attributes is already available in @types/styled-jsx
package
from styled-jsx.
@a-ignatov-parc Ok! Thank you! I decided to apply style by style
tag!
from styled-jsx.
How write this for Inferno?
import 'react';
declare module 'react' {
interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
jsx?: boolean;
global?: boolean;
}
}
from styled-jsx.
@R1ZZU can you help these folks?
from styled-jsx.
Found my way here because I'm having trouble with styled-jsx
when it comes to Mocha testing in a TypeScript environment. To start: I have no problem using 2.2.6
to produce browser-ready pages. It's only in the Mocha pipeline that I encounter issues, because I have to use ts-node/register
and babel doesn't fit neatly into that.
One part of the problem is a PR I submitted to DefinitelyTyped here, to properly represent styled-jsx/css
in Types; but I think I the error was on the wrong side—I think the stubbed function that throws an error should be EDIT: see follow-up comment below. So that's the first problem.exports.default = function
rather than module.exports = function
The second problem is that, while I have no problem in Next 5 or 6 building pages that render in the browser with styled-jsx and TypeScript, I cannot get @babel/register
to hook into the Mocha pipeline and transpile properly in Next 6 (which uses Babel 7, which uses pirates, which allows for ts-node/register
alongside @babel/register
—where 6 would only allow either ts-node
or babel-register
, and thus apparently can't be used with Mocha in this workflow).
It looks like the upcoming release rethinks css
significantly; I don't know if it'll have an effect on this problem. Is there a timeframe for its release?
You can reproduce all the issues I'm talking about at this repo, across its various branches: https://github.com/bensaufley/styled-jsx-example-issues/
master
has no typescript and works as expectedtypescript_at_next5.1
does not usebabel-register
(it can't) and thus, predictably, can't transpiletypescript_at_next6
uses@babel/register
but still can't transpile.
from styled-jsx.
Following up on the first issue, exports.default
vs export = css
at DefinitelyTyped, I'm realizing that I had conflated the output of my styles.ts
and the output of styled-jsx/css
, which … doesn't actually exist as anything more than a hook that says "transpile this". So I think my original PR, to satisfy TypeScript's type checking, is correct.
from styled-jsx.
Hi, I am hitting this issue with wrong scoping: https://spectrum.chat/styled-jsx/general/storybook-next-js-styled-jsx-styles-not-scoped-to-component~8a63d2a1-6b05-4a27-b839-c4a903eb6f43
style jsx
is just converted to a local style tag, so style will be unscoped :/
Edit: ok got it it's actually similar to "Warning: unknown jsx prop on <style> tag" issue. When TS is configured right, it does not complain about "jsx" tag. But it won't build correctly either. An additional step of running Babel for .ts file, with Webpack Babel-loader, is probably mandatory (setting .babelrc is not enough).
As far as I understand you actually need TS code to be transpiled with babel-loader
, however it's way less powerful (no custom ts copnfig for example)
from styled-jsx.
Related Issues (20)
- Unable to integrate with animated element of react-spring. HOT 1
- Security Vulnerability on dependency [email protected] - CVE-2022-37601
- styled-jsx/macro.d.ts typo HOT 1
- Document is not defined HOT 1
- Make <reference types="styled-jsx" /> include global.d.ts? HOT 4
- Scope type not being changed when using comment on external file
- scoping styles with brackets & double colons
- Flushing styles from an external component library into next js HOT 1
- Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got CallExpression
- Custom Font in Next13 App Dir HOT 1
- Container Queries HOT 2
- Support for vite + swc HOT 1
- CSS not working while migration from babel to swc compliler HOT 1
- Server Components HOT 1
- How to use styled-jsx with webpack and React only, without Babel and Next.js? HOT 2
- Bug: Received `true` for a non-boolean attribute `jsx` even with ["styled-jsx/babel-test"]
- ReactDOMServer.renderToPipeableStream
- Preventing the jsx-* class from being added on every element HOT 1
- loader-utils has security risks HOT 1
- Typo in issue template. "verce" should be "vercel"
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-jsx.