MUI/Icon makes everything dissapear

2022-05-06 19:35 Trif Ionut imported from Stackoverflow

When I try to import and use a mui icon in react, it makes the whole div dissapear, and just the background image remain, i have installed: emotion/react, emotion/styled, mui/icons-material, mui/material, styled-components, mui/styled-engine-sc

        <div className="login">
        <h1>Login</h1>
        <div className="form">
            <EmailIcon className='icon'/>
            <input type="text" placeholder="Email"></input>
            <input type="password" placeholder='Password'></input>
        </div>
        <div className="buttons">
            <button id='login'>Login</button>
            <button id='register'>Register</button>
        </div>
    </div>
)

1 answer

answered 2022-05-06 20:47 gavin
I copied your code, installed the dependencies and it worked just fine for me. I suggest updating these dependencies:

npm update @mui/material @mui/icons-material @emotion/styled @emotion/react

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
```
 <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
```
but it not work in v6.

How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

This my .env file

REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
REACT_APP_authDomain=XXXXX.firebaseapp.com
REACT_APP_projectId=XXXX
REACT_APP_storageBucket=XXXXX.appspot.com
REACT_APP_messagingSenderId=4997390XXXXX
REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
REACT_APP_measurementId=G-M1XDXXXXXX

This my firebase config file

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

when I debugging firebaseConfig object

console.log(firebaseConfig.apiKey);  ==========> undefined 
console.log(firebaseConfig.authDomain);  ==========> undefined 
console.log(firebaseConfig.projectId);  ==========> undefined 
console.log(firebaseConfig.storageBucket); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined 
console.log(firebaseConfig.appId); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined

client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"

I would like the header logo and main visual to be aligned vertically

Prerequisites

The header logo and main visual are side by side.

Expected value

I want the header logo and main visual to be aligned vertically.I would like to do something like this URL.

Reproduction procedure

Run the code below.

body {
    height: 1295.83px;;
    width: 1263px;
    display: flex;
    justify-content: center;
}

.header__container {
    height: 17.83px;
    width: 1000px;
    font-size: 14px;
    font-family: Meiryo;
    margin: 60px 0px 0px;
    .header__logo {
        height: 17.83px;
        width: 160px;
    }
}

.container__main {
    height: 1295.83px;
    width: 1263px;
    main {
        height: 1118px;
        width: 1000px;
        .main__mainvisual {
            height: 400px;
            width: 1000px;
        }
    }
}

<!DOCTYPE html>
<html lang="ja">
<body>
    <header class="header__container">
        <img class="header__logo" src="image/logo.svg" alt="PHOTO BOOK">
    </header>
    <div class="container__main">
        <main>
            <img class="main__mainvisual" src="image/mainvisual.jpg" alt="メインビジュアル">
        </main>
    </div>
</body>
</html>

Media-queries not working on Sass project

I am working on a Sass project and everything worked properly, but media queries are not working. I tried adding them at the bottom of the document, adding in the chain of labels, having more specificity than the normal chain and nothing is working. Do you know what the problem could it be?

Here is what I did:

Breakpoints:

$mobile-breakpoint: 600px;
$laptop-breakpoint: 922px;

In this case is applying the media query even when the width is less than 922px:

img{
    height: 5vw;
    margin: 3vh 4vh 4.6vh 3vh;
    @media(min-width: $laptop-breakpoint){
        height: 4vw;
    }
}

The code after being coverted to CSS:

.main-header .header-logo-search a img {
  height: 5vw;
  margin: 3vh 4vh 4.6vh 3vh;
}
@media (min-width: 922px) {
  .main-header .header-logo-search a img {
    height: 4vw;
  }
}

In this case, it does not apply the media query:

input{
      @include search();
      width: 30vw;
      box-sizing: border-box;
      padding: 0 1.5vw;
      font-size: 1.2rem;
      background-color: $snow;
      border-radius: 5px 0 0 5px;
      @media(max-width: 600px){
      display: none;
}

The code after being coverted to CSS:

.main-header .header-logo-search form input {
  height: 3.5rem;
  line-height: 3.5rem;
  border: none;
  margin: auto 0;
  width: 30vw;
  box-sizing: border-box;
  padding: 0 1.5vw;
  font-size: 1.2rem;
  background-color: #FFF9FB;
  border-radius: 5px 0 0 5px;
}
@media (max-width: 600px) {
  .main-header .header-logo-search form input {
    display: none;
  }
}

Thanks in advance

React MUI - Consistent Tab Content Height

I understand that ideally should be placed at the top of the page. However, Assume they are place in the middle of the page. When changing from a tab with a lot of content, to a tab with little content, the scrollable area disappears. Is there anyway to preserve the white space?

https://codesandbox.io/s/labtabs-material-demo-forked-y39i2g?file=/demo.tsx

Here is a code sandbox example.

Step 1 scroll down to tabs.

Step 2 scroll down tab 1 content( leave tabs visible)

Step 3 click tab 2 (Mouse no longer is hovering over tabs because vertical scroll content vanishes)

Edit: I am able to change my root div min height to whatever I need hard-coded. I feel like this hacky though and not dynamic to the tallest tab

MUI Radio button disabled change value when Select drop down changes

My problem is that when I change a value in a dropdown I want to disable two radio buttons and change to the correct radio button. I am able to disable the radio buttons but not able to change the value to the one that isn't disabled. This might sound very complicated but I have made a code sandbox showing an example making it very simple to understand what goes wrong. So in the example which is the same as the code below. When the dropdown gets changed to buildings, both and colors should be disabled(Which happens now) but I also want it to autoselect the "Citys" radio button. https://codesandbox.io/s/competent-austin-igz4uh?file=/src/App.js:0-1905

What I have tried so far: I have tried using a useEffect to change when the select dropdown changes but it didn't work.

import "./styles.css";
import {
  FormControl,
  FormLabel,
  RadioGroup,
  Radio,
  FormControlLabel,
  InputLabel,
  Select,
  MenuItem
} from "@material-ui/core";
import React, { useState, useEffect } from "react";
export default function App() {
  const [chosenSorting, setChosenSorting] = useState("colors");
  const [sortingType, setSortingType] = useState("both");
  function handleChange(event) {
    setChosenSorting(event.target.value);
  }
  useEffect(() => {
    if (chosenSorting === "colors") {
      setSortingType("colors");
    }
  }, [chosenSorting]);
  return (
    <>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Chosen Sorting</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={chosenSorting}
          label="Chosen Sorting"
          onChange={handleChange}
        >
          <MenuItem value={"colors"}>Colors</MenuItem>
          <MenuItem value={"buildings"}>Buildings</MenuItem>
        </Select>
      </FormControl>
      <FormControl>
        <FormLabel id="demo-radio-buttons-group-label">
          Fylke or Kommune
        </FormLabel>
        <RadioGroup
          row
          defaultValue="both"
          onChange={(e) => setSortingType(e.target.value)}
        >
          <FormControlLabel
            disabled={chosenSorting === "buildings"}
            control={<Radio />}
            value="both"
            label="Both"
          ></FormControlLabel>
          <FormControlLabel
            control={<Radio />}
            disabled={chosenSorting === "buildings"}
            value="colors"
            label="Colors"
          ></FormControlLabel>
          <FormControlLabel
            control={<Radio />}
            value="citys"
            label="Citys"
          ></FormControlLabel>
        </RadioGroup>
      </FormControl>
    </>
  );
}

Trying to loop through firebase and display each object as a card React
My data is structured like so [1]: https://i.stack.imgur.com/dWsr3.png

I am trying to loop through the database and put the data from each card into props for my ProductCard> component. It takes in values as I've been racking my brain with this and googling constantly, but this is my best attempt.
```
const db = getDatabase();
const dbRef = ref(db, 'products');
onValue(dbRef, (snapshot) => {
    snapshot.forEach((childSnapshot) => {
      return (
          <ProductCard title={childSnapshot.val().prod_title} />
      )
    });
  }, {
    onlyOnce: true
  });
```
I'm very much a noob with react so I appreciate any advice!
React Hooks - Using useRef without direct access to HTML Element Code?
With React I'm inside of one repository, and the HTML elements are loading from another repo, which I watch for using pageLoaded. Inside updateHeader there is just more HTML element selecting and attribute/class manipulation.
```
useEffect(() => {
        if (pageLoaded.status) {
            if (someCondition) {
                updateHeader(ubeName);
            } else {
                document.querySelector('.headerbar-menu').style.display = 'block';
                if (document.querySelector('.headerbar-menu.affiliates-wrapper')) {
                    document.querySelector('.headerbar-menu.affiliates-wrapper').style.display = 'none';
                }
            }
        }
    }, [pageLoaded.status])
```
The problem here is obviously we shouldn't be using querySelector, and i think it may be causing some unexpected functionality. The elements dont properly evaluate and render until some piece of state changes i.e. a scroll state handler, so on initial page load the elements dont show with their new attributes until a scroll.

I'd like to attempt to resolve using useRef, but don't have direct access to the html. Is there a way to dynamically connect a ref to an element without access to the HTML code?

Thanks for your time and attention!