In my React project I've installed blueprintjs as a dependency.
When I do this in code:
import {Popover} from "#blueprintjs/core";
...
render() {
...
<Popover /* No autocomplete for props */>
</Popover>
I don't get any autocomplete for PropTypes of Popover component.
Note: the Popover component is written in TypeScript.
How can I get autocomplete to work in PhpStorm?
The issue is tracked at WEB-38214, please follow it for updates
Related
I am trying to embed React Components into Angular because I have written some react components only because it's using a React library. However, my main framework is still Angular12+.
I have this .tsx file src/app/my-react-component.tsx
import * as React from 'react';
export default function MyReact() {
return (
<div>
<h1>Hello My React Component!</h1>
</div>
);
}
and I want to import this from src/app/app.component.ts
import MyReact from './my-react-component';
Then, I see this error
Import error, can't find file:
./my-react-component
To try, I added "jsx": "react" to tsconfig.json, but did not work, a solution from https://codebyz.com/embedding-react-components-in-angular-the-easy-way/
This is stackblitz page, which you can see this error.
Anyone who has a victory on importing .tsx into Angular project?
I think you did everything right
specify jsx: react in tsconfig
create a wrapper with React rendering (with standalone directive it becomes much simpler btw)
It's just an error from Stackblitz because they have their own vision of typescript compilation.
Here is a link with the same code from Codesandbox
I tried to use of antd in my component but it can't load the correct style.
This is my code:
import { Calendar } from 'antd';
<Box sx={{width:350, height:350}}>
<Calendar fullscreen={true}/>
</Box>
This is its style in my component:
In my component
And this its correct component in the official document:
In doc
This is the link of official doc:https://ant.design/components/calendar/
Its look like stylesheet not imported.
Please follow the installation process
This should be work.
import 'antd/dist/antd.css'; // or antd/dist/antd.less
I created a project using electron react boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate
Everything works, but I decided to add antd (ant design)
yarn add antd
Then I import the antd styles
index.tsx
...
import "./styles/global.css";
import "./styles/fonts.css";
import "antd/dist/antd.css"
...
Next I used a button of type primary
some_component.tsx
import React from "react";
import s from './someComponent.module.scss'
import { Button } from "antd";
export const SomeComponent: React.FC = () => {
return <div className={s.root}>
<Button type={'primary'}> button text </Button>
</div>
}
But the style of the button remains the same (with standard styles)
I tried importing the component styles directly into my global.css, also tried adding to the component style, but that didn't change anything
#import "~antd/dist/antd.css";
I have looked into the following repository where it works, however I didn’t figure out how to add it to my project. I don't want to use this repository as it works crookedly and doesn't use typescript
Thanks!
you can add this import in App.global.css or create new one custom.global.scss
copy this line
#import '~antd/dist/antd.css';
then import this scss into your App.tsx
import './custom.global.scss';
This should work
Anyone have suggestions about how to overcome the problem of styling and bootstrapjs and css files not working in react app and how to import bootstrapjs file in react component.
I have created a toggler navbar with bootstrap and using popover and bootstrap files not working
import React from 'react';
import SwiperDiv from './swiper';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<SwiperDiv/>
</div>
);
}
export default App;
index.js:1375 Warning: React does not recognize the classNmae prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase classnmae instead. If you accidentally passed it from a parent component, remove it from the DOM element.
You may have a typo on your DOM element
classNmae
try className
From your error message I'm guessing somewhere in your code (probably ./swiper) you wrote classNmae instead of className and that's what is causing your issue.
Also, in the code you posted you're closing a div tag inside the return statement without its opening tag present, so it's definitely going to throw an error. You should probably do:
return (
<div>
<SwiperDiv/>
</div>
)
add bootstrap's
link and scripts
inside root "public/index.html" directory if you've created react APP using create-react-app
I'm trying to use this css style to styling my react app. But the css didn't work in my element, how to solve it ?
import React, { Component } from 'react';
import style from './styles/css/bootstrap.css';
class App extends Component {
render() {
return (
<div>
<button className={style['btn', 'btn-primary']}>test button</button>
</div>
);
}
}
export default App;
import style from './styles/css/bootstrap.css';
What are you expecting the import to do? If it is to just include the css, then you don't need to give it a name.
import './styles/css/bootstrap.css';
Should be enough.
style['btn', 'btn-primary']
Styling in react comes in various flavours. I would recommend reading the official documentation for it. Assuming you just want to use the classes: btn and btn-primary, you can just pass them to react as:
<button className="btn btn-primary">test button</button>