apply style on mui autocomplete using styled Components
I try to change the input box background and shape i did some tests with red color but i cannot apply any color its like autocomplete don't listen
const StyledAutoComplete = styled(Autocomplete)`
& MuiAutocomplete-tag {
background: green
}
`;
<StyledAutoComplete
disablePortal
id="search_form"
options={locations}
getOptionLabel={(option: object) => option.city}
renderOption={(props, option) => (
<li {...props}>{`${option.city}, ${option.country}`}</li>
)}
sx={{ width: 300 }}
renderInput={(params) => (
<CustomTextField {...params} label="Choose a country" />
)}
/>
1 answer
-
answered 2022-05-04 10:37
Marcin
Try changing:
& MuiAutocomplete-tag {
to
& .MuiAutocomplete-tag {
(dot is missing) :)
do you know?
how many words do you know
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
-
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..