apply style on mui autocomplete using styled Components

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>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• 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)"
• 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>
      </>
    );
  }
  
• MUI/Icon makes everything dissapear

  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>
  )
  
• Background Image is not showing from a figma design

  below is a figma desing im trying to convert to a react component , the issue that i have is the blue background (which is an image) is not displaying , please can you review and tell me what could be possibly wrong with my code , i have tried both background attribute and background-image attribute but both are not working , i was thinking on playing with the z-index of all the divisions but that wont be a professional way to handle it.

  here is my code

  import React from "react";
  import styled from "styled-components";
  import Rectangle233 from "../images/Rectangle 233.png";
  import Rectangle234 from "../images/Rectangle 234.png";
  import Rectangle236 from "../images/Rectangle 236.png";
  import Subtitle2 from "../theme/Subtitle2.styled";
  import Body2 from "../theme/Body2.styled";
  import Button from "../theme/Button.styled";
  
  const DevelopSec = styled.div`
    margin-top: 10.3rem;
    width: 192rem;
    height: 111rem;
    background: url(${Rectangle234});
    background-size: cover;
  `;
  
  const Dev1 = styled.div`
    display: flex;
    margin-left: 34.5rem;
  `;
  
  const DevImage1 = styled.div``;
  
  const DevText1 = styled.div`
    margin-left: 7rem;
    margin-top: 16rem;
  `;
  
  const DevHeader1 = styled.div``;
  
  const DevParag1 = styled.div`
    margin-top: 1.3rem;
    width: 48rem;
  `;
  
  const DevBt1 = styled.div`
    margin-top: 3.9rem;
  `;
  
  const Dev2 = styled.div`
    display: flex;
    margin-top: 5.5rem;
  `;
  
  const DevImage2 = styled.div``;
  
  const DevText2 = styled.div`
    margin-left: 62rem;
    margin-top: 6.2rem;
  `;
  
  const DevHeader2 = styled.div``;
  
  const DevParag2 = styled.div`
    margin-top: 1.3rem;
    width: 48rem;
  `;
  
  const DevBt2 = styled.div`
    margin-top: 3.9rem;
  `;
  
  const Develop = () => {
    return (
      <DevelopSec>
        <Dev1>
          <DevImage1>
            <img src={Rectangle236} alt="Rec236" />
          </DevImage1>
          <DevText1>
            <DevHeader1>
              <Subtitle2>
                Develop
                <br /> Without Limits
              </Subtitle2>
            </DevHeader1>
            <DevParag1>
              <Body2>
                WooCommerce is developer friendly, too. Built with a REST API,
                WooCommerce is scalable and can integrate with virtually any
                service. Design a complex store from scratch, extend a store for a
                client, or simply add a single product to a WordPress site—your
                store, your way.
              </Body2>
            </DevParag1>
            <DevBt1>
              <Button var="containedSecondary" size="md">
                Read the Documentation
              </Button>
            </DevBt1>
          </DevText1>
        </Dev1>
        <Dev2>
          <DevText2>
            <DevHeader2>
              <Subtitle2>
                Know our
                <br /> Global Community
              </Subtitle2>
            </DevHeader2>
            <DevParag2>
              <Body2>
                WooCommerce is one of the fastest-growing eCommerce communities.
                We’re proud that the helpfulness of the community and a wealth of
                online resources are frequently cited as reasons our users love
                it. There are 80+ meetups worldwide!
              </Body2>
            </DevParag2>
            <DevBt2>
              <Button var="containedSecondary" size="md">
                Read the Documentation
              </Button>
            </DevBt2>
          </DevText2>
          <DevImage2>
            <img src={Rectangle233} alt="Rec233" />
          </DevImage2>
        </Dev2>
      </DevelopSec>
    );
  };
  
  export default Develop;
  

  and below is the image

  
• Material UI + styled with props throws "React does not recognize zIndex prop on a DOM element."

  I'm struggling with React error -> React does not recognize zIndex prop on a DOM element. It happens when I'm using MUI component and Styled with props.

  Code example:

  styled:

  import {Drawer as DrawerBase, styled} from '@material-ui/core'
  
  interface DrawerProps {
    zIndex: number
  }
  export const Drawer = styled(DrawerBase)<Theme, DrawerProps>(({zIndex}) => ({
    zIndex
  }))
  

  implementation:

  <Drawer zIndex={10} />
  

  I'm using: "@material-ui/core": "^4.12.3"

  Is there any possibility to prevent passing props to DOM elements?
• How to setup SSR blog project using NextJS in best practice?

  The question is about my new Next SSR Blog Project. There are 3 URLs for API endpoints. The project features such as search, category filter, tagging, dynamic breadcrumb, and pagination. Purpose: very good SEO and Performance ratings.

  At this point, I’m a little confused about project structure and technology stack for best practice. TypeScript, TailwindCSS or Styled-Components…

  But idk what to use for data fetching. How should I build the best structure? Should I use SWR or React-Query for SSR and above features like pagination or filter? And is there no need for all this? Do you know guys a boilerplate or have any suggestions for this project?

  Finally, need to add babel-plugin-styled-components to be able to use SSR and styled-components in the latest version Next?

  Thank you guys..