I am using the Autocomplete component from the Material UI (v0.20.0) component library in ReactJS project. I have tried finding an implementation for this functionality but haven't come across a good example. I want to be able to highlight/format the text that the user enters in the search results similar to the attached image.
If you are using Material-ui v0.xx then please take a look at below example.
To apply styles to user entered text you have to use inputStyle prop as like below.
Also I have mentioned the other styles for floating label, underline, hint text etc which may help community.
const styles = {
floatingSearchLabelStyle: {
color: '#fff',
fontFamily: 'Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande'
},
inputSearchStyleText: {
color: '#fff'
},
underlineSearchStyle : {
borderColor: '#fff'
},
hintSearchStyle: {
color: '#fff'
}
}
<AutoComplete
floatingLabelText="Search people"
hintText="Search with name"
dataSource = {dataSource}
style={{marginTop: '-20px'}}
maxSearchResults={10}
anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
animated={true}
onNewRequest= {this.handleNewRequest}
onUpdateInput={this.handleUpdateInput}
filter={AutoComplete.fuzzyFilter}
inputStyle={styles.inputSearchStyleText}
underlineStyle={styles.underlineSearchStyle}
underlineFocusStyle={styles.underlineSearchStyle}
hintStyle={styles.hintSearchStyle}
floatingLabelStyle={styles.floatingSearchLabelStyle}
/>
Hope this answer helps you if you are using material-ui v0.xx.
Related
I am trying to customize MUI component like below and importing it other part of my project.
This not just happens with input field components, even applying sx on simple component like Box having same problem
<MUISelect
sx={
{
fontSize: "0.8rem",
p: "0 !important",
height: "35px",
"& input": {
"font-size": "0.7rem",
},
}
}
label={label}
/>
I'm new to using Material UI and have integrated into my portfolio website to create an ImageList that redirect to other projects I'd like to show possible employers. I'm having trouble editing the style of the text inside ImageListItemBar. I've tried using the primaryTypographyProps and sx to no avail. Could someone point me in the right direction?
<Typography variant="h3" color="common.red">
<ImageListItemBar
primaryTypographyProps={{fontSize: '30px'}}
sx={{
background: 'black',
}}
position="bottom"
title={item.title}
/>
</Typography>
//tried this as well
<ImageListItemBar
sx={{
color: '#000';
background: 'black',
}}
position="bottom"
title={item.title}
/>
Here is the code You are after:
<ImageListItemBar
title="image title"
subtitle="image subtitle"
sx={{
"& .MuiImageListItemBar-title": { color: "red" }, //styles for title
"& .MuiImageListItemBar-subtitle": { color: "yellow" }, //styles for subtitle
}}
/>
I recommend studying official MUI docs for ImageList and ImageListItemBar API
Hamed's answer is correct, you need to target the specific class applied to the title in order to style it.
I've been developing a pattern of doing this lately, where you can import the component's classes and style accordingly using styled. This allows you to use your IDE to autocomplete the class names and target them accordingly.
const StyledImageListItemBar = styled(ImageListItemBar)(() => ({
[`& .${imageListItemBarClasses.title}`]: {
color: "red"
},
[`& .${imageListItemBarClasses.subtitle}`]: {
color: "yellow"
},
backgroundColor: "black"
}));
Then you can just use the component without having to resort to sx:
export default function App() {
return (
<StyledImageListItemBar
title="This is a title"
subtitle="This is a subtitle"
/>
);
}
Here's a sandbox of this in action if you want to play with it: https://codesandbox.io/s/mui-targetting-classes-8y5kpm?file=/src/App.js
That being said, if you're planning to reuse this component with the custom styling, I would consider overriding the default styling in theme too.
I'm trying to apply some basic styles to the options inside the Autocomplete component from MUI v5. I'm just trying to change the background color on hover, and based on whether or not it is selected. I've tried 2 approaches based on the documentation, using a theme, and applying the sx prop to Autocomplete.
Using Theme almost has me there, code below:
import { createTheme, ThemeProvider } from '#mui/material/styles';
const theme = createTheme({
components: {
MuiAutocomplete: {
styleOverrides: {
option: {
'&[aria-selected="true"]': {
backgroundColor: '#e3abed',
},
'&:hover': {
backgroundColor: '#9c27b0',
},
backgroundColor: '#fff',
},
},
},
},
})
I have the ThemeProvider wrapped around my entire app
and the component:
<Autocomplete
options={['1', '2', '3']}
renderInput={(params) => <TextField {...params} label="Priority" />}
onChange={(_e, val) => setPriority(val)}
/>
So, this almost works. However the [aria-selected="true"] styling is only being applied when I am also hovering over another option in the dropdown. Otherwise it's the default grey that comes with the component and I don't understand why.
The second path I have tried is to use the sx prop on the Autocomplete component. In the docs it says you can target child components by their class name: https://mui.com/material-ui/customization/how-to-customize/#overriding-styles-with-class-names
Here is my component:
<Autocomplete
options={['1', '2', '3']}
renderInput={(params) => <TextField {...params} label="Priority" />}
onChange={(_e, val) => setPriority(val)}
sx={{
'& .MuiAutocomplete-option': {
backgroundColor: '#000',
},
'& .Mui-focused': {
backgroundColor: 'red',
},
}}
open
/>
That doesn't appear to be having any effect. I've been working on this for almost 2 hours and can't seem to get to the finish line here. Any help would be greatly appreciated.
I had the same problem; turns out I just needed to explore the Autocomplete API docs' Props section a bit further. There are several customization possibilities if you don't want to deal with global theme customization:
The PaperComponent prop allows customization of "[t]he component used to render the body of the popup." Note that simply using sx on Autocomplete does not work here because (as #bnays-mhz pointed out) the PopperComponent that the PaperComponent is nested in lives outside the main DOM tree (for z-index/modal UX purposes).
The renderGroup prop allows overriding the rendering of option group headers.
The renderOption prop allows overriding the rendering of individual options.
function CustomPaper({ children }) {
return (
<Paper
sx={{
"& .MuiAutocomplete-listbox": {
"& .MuiAutocomplete-option[aria-selected='true']": {
bgcolor: "purple",
"&.Mui-focused": {
bgcolor: "purple",
}
}
},
"& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-focused": {
bgcolor: "red",
}
}}
>
{children}
</Paper>
);
}
Following up on Lars' answer, here's an example using a custom Paper component. Just pass in the custom Paper component name to the PaperComponent prop on Autocomplete <Autocomplete PaperComponent={CustomPaper} {...blahBlahOtherProps} />. This way is nice if you don't want to override the theme for all Autocomplete components.
You can override Autocomplete options css by targeting class
'.MuiAutocomplete-popper'
You will have to apply css globally because this node is created outside the root element in DOM.
I too faced this issue and found a solution.
You Can try this to set the css for options, single option and while hovered (focused) in the Autocomplete using 'sx' prop
Easy Way to customize your AutoComplete component which can be used in Mui V5
<Autocomplete
limitTags={1}
disablePortal
id="simple-search"
value={select.region}
onChange={handleChange("region")}
options={region}
sx={{
width: { sm: "100%", md: 340 },
"& + .MuiAutocomplete-popper .MuiAutocomplete-option":
{
backgroundColor: "#363636",
},
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']":
{
backgroundColor: "#4396e6",
},
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected ='true'] .Mui-focused":
{
backgroundColor: "#3878b4",
},
}}
disableCloseOnSelect
multiple
renderInput={(params) => (
<TextField {...params} label="Region" color="info" />
)}
/>
I see that there are filterIcon, menuIcon and menuIconButton properties, but I do not have any idea how to apply them.
<DataGrid
rows={rows}
columns={columns}
rowsPerPageOptions={rowsPerPage}
disableSelectionOnClick
// should be some stuff here
/>
I have tried this approach. First define the styles
const styles = theme => ({
activeSortIcon: {
opacity: 1,
color : 'blue',
},
inactiveSortIcon: {
opacity: 0.4,
color : 'green',
},
});
Then use these styles in DataGrid component according to your logic how to use it
<DataGrid
rows={rows}
columns={columns}
rowsPerPageOptions={rowsPerPage}
disableSelectionOnClick
classes={{
icon: ((orderBy === column.id) ? classes.activeSortIcon :
classes.inactiveSortIcon )
}}
// should be some stuff here
/>
You can add different icons in styles instead of colors using this approach. Hope this approach might be helpful. Please let me know if this worked.
Reference : How to change the style of sorting icon in Material UI table?
For those still interested in styling the MUI-data grid icons, you can also utilize a styled component vs. using classes.
const StyledDataGrid = styled(DataGrid)((theme) => ({
"& .MuiDataGrid-sortIcon": {
opacity: 1,
color: "white",
},
"& .MuiDataGrid-menuIconButton": {
opacity: 1,
color: "white"
},
}));
Now you return your styled component since we've declared the styles accordingly:
<StyledDataGrid
rows={x}
columns={columnDef}
autoHeight
...more stuff if you want...
/>
There you go! You don't need to declare classes or anything.
Also, the styled component allows you to style everything in the data grid with the proper referencing (MuiDataGrid-columnHeaders, MuiDataGrid-columnHeaderTitle, Mui-selected, etc.)
Feel free to take a look at this explanation on MUI styled components:
https://mui.com/system/styled/
I want to change style in part of Text in React Native.
I tried this :
<Text style={styles.parent}>
Dernier message : <Text style={[styles.children, {
color: 'red',
paddingLeft: 10,
borderWidth: 5,
borderColor: 'black',
}]}>Coucou</Text>
</Text>
const styles = StyleSheet.create({
parent: {
backgroundColor: 'yellow',
},
children: {
backgroundColor: 'blue',
},
})
Parent background color is changed - good
Children color and background color is changed - good
Children padding left and border is not changed
Can you help me ? Thanks
The <Text> element is special as far as layout is concerned. From the docs: "everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line."
To achieve what you seem to be looking for, it's probably advisable to use a wrapping<View> with two inner <Text>s.
PFB the expo snack link. Hope it helps
Expo link