How to set iOS status bar background color in React Native?

Is there a single place in the react native iOS native code that I could modify to set iOS statusbar backgroundColor? RCTRootView.m ? The react native StatusBar component only support...

Setting up proper React Code highlighting in Visual Studio Code?

I have been trying to find a proper way to highlight React Code in '.js' files so that it is easier to read in Visual Studio Code. The photo below shows a sample file of how a lot of it is in one...

Antd: How to override style of a single instance of a component

I'm using webpack to import the antd.less file in a global App.less file. Then I override some global styles and webpack bundles everthing: // App.less @import "~antd/dist/antd.less"; @import...

Load fonts with Webpack and font-face

I'm trying to load a font in my CSS file using @font-face but the font never loads. This is my directory structure. Then in webpack.config.js I have the loader to get fonts. var path =...

How can I change the underline color of MaterialUI's React Tabs component?

I noticed there is no documentation on MaterialUI's website in regard to changing the underline color of their Tabs component... http://www.material-ui.com/#/components/tabs

Full width material-ui Button within a Badge?

I have a Button inside a Grid and was using fullWidth to expand it to fill the container. This worked fine, until I wrapped it in a Badge. Now the fullWidth property is ignored and the button is...

CSS Margin is not setting to 0

I'm a new comer to web designing. I created a simple web app using CSS and HTML and some basic JS. The problem: Even though i set the margin to 0, the margin is not setting to 0 and leaves 8px...

React Tour get wrong position when using with Slide transition in Dialog Material UI

As described, I'm using react-tour to implement a guidance for my project. The First step is a small component that stays inside a <Dialog /> that needs to be highlighted. But due to the...

React Router Link in <select> <option>

there I'm trying to filter some date using React Router Link in select box with 4 options in it. When I wrap the options with a Router Link I don't see values in the select box (is empty), any...

plotly is undefined in react

i am creating a weather app in react which shows the weather forcast in a graph using the api but i am getting an error plotly is undefined although i have pasted cdn of plotly in my...

React draft-js color picker lost inline style

I am using Draftjs Editor to generate html content. Also using a package draft-js-color-picker that generates inline styles on the Editor content and I am able to extract that to html and save it...

undefined is not an object (evaluating 'Context._context') - React Native

I am trying to wrap one of my navigators with User Context that I created. I have achieved this before in other projects but I am encountering an issue. I Tried following this solution but it...

React-Typescript: This JSX tag's 'children' prop expects a single child of type 'Element | undefined', but multiple children were provided

I am using react-typescript for my app. For styling I am using Style component. I have decided I will create my custom Hooks Input and Password input. So I first created Input wrapper where I...

Material-Ui TextField not affected with the RTL direction

I'm using Material-Ui in my React Project ! i followed the steps in the documentation to allow RTL in my project and all work fine ! except the TextField Component LTR DIRECTION : RTL...

Issues with rendering a custom header component in the header bar of React-Native navigation

I am using the following code for React-Navigation where I use Stack Navigation to render the screens. I have a custom component named Header which I am rendering in the header bar. I am setting...

Typescript React Functional Component with props.children

I'm trying to make a component that will show a loading circle when the prop isLoading is true, and otherwise show the child component. I'd like to use the component in other components likes...

react-icons - Can't change color Grommet icons

I'm using react-icons and with Font Awesome icons I managed to change color easily with 2 approaches: Works with color prop: <FaUserTimes /* color="#023373" */ className="icone icone-40"...

npm ERR! invalid json response body at http://registry.npmjs.org/ansi-escapes reason: Unexpected end of JSON input

I have nodejs and npm installed I tried running the command npm install -g create-react-app but it halts at the error below [email protected]:~$ npm install -g create-react-app npm WARN registry...

TAR_BAD_ARCHIVE and TAR_ENTRY_INVALID when trying to npm install any package

I tried to delete npm_cache and install the latest version of npm but it didn't work. I have no additional ideas because I searched all the similar questions with the same error. I cant even npm...

How to share QR code on react native expo?

I'm creating an app to generate a QR code, and then share it on social media. Currently, I manage to create the QR code, however, I'm lost at sharing the generated code as an image. I'm using...

Emotion react css in js class name without component name

Added css to element as below: /** @jsxRuntime classic */ /** @jsx jsx */ import { jsx, css } from '@emotion/react'; function Icon() { return ( <span css={css` ...

How to show data value on top of bar in react-chartjs-2?

I made bar chart in react-chartjs-2. I want to show data value of each bar on the top of the bar. For that I used the plugin calls chartjs-plugin-datalabels But it's not showing anything. is it...

react-chartjs-2 change axes text color

I did a lot of searching but nothing I tried works to change the axes text color. However, I am able to change the grid color to white in scales.yAxes.grid.color. This is what I have right now: ...

Please help to solve the problem React Hook "useRef"

Hello please help to solve the problem. Page about contact form. I must get data from with useRef to const {name, email, message}. And I must definitely use useRef It is error message, and I...

Typescript Module augmentation is not working: Property 'main' does not exist on type 'PaletteColorOptions'

I have been working on Material-UI and trying to use a color system throughout the palette. There seems to be some issue while compilation although it works perfectly in run time. Can someone help...

Issue in Textfield default value set using the useEffect hook in the material-ui in react

I am trying to set the default value of Textfield in the react material-ui. It is working without the material-ui Textfield. But when I am using the Textfield it is not working. Ex. Working with...

How to type a button with react-router-dom Link in MUI v5

Problem I am migrating from MUI v4 to v5 and I am having an issue using the styled function to style a Button component. For some reason, when I use MyButton instead of Button, the compiler has an...

Chakra UI for React: change _focus borderColor not work

I set the default theme on Chakra UI for React with extendTheme(). When I try to change the Select component's style like this, the _focus style does not applied, while the color behaves as...

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'reduce')

I am working on yup validation. Whenever it comes to FileList validation, if I left the input blank, I got the following error: enter image description here Here is my code: import React, {...

How to use SCSS and Tailwind CSS with Storybook in Next.js

I am trying to load a global scss file into storybook, but as soon as I changed the import from .css to .scss, I got errors that ranged from @ not being recognized in the @import tailwind to ERROR...