MUI has a slider component: https://mui.com/material-ui/react-slider/
I'm trying to figure out how to disable the animaiton that plays on the nub to move it to the new position so it moves instantly instead. Is there any way to do this?
You need to turn off transition property for thumb and track elements of slider with styled utility:
import Slider from '#mui/material/Slider';
import { styled } from '#mui/material/styles';
const CustomSlider = styled(Slider)(({ theme }) => ({
"& .MuiSlider-thumb": {
transition: 'none'
},
"& .MuiSlider-track": {
transition: 'none'
},
}));
Related
I need some help with this problem I'm having with Material-UI styled components
I'm trying to create a BottomNavigation bar on react using Material-UI v5. I want that the icon of the selected option in the bar shows a specific color, let's say red (#f00) and the not-selected icons show green (#00f), for this I'm using the styled function to generate a custom-themed component for BottomNavigationAction, following the guidelines on the documentation: styled(). The problem: For the selected button, the icon is not grabbing the correct color and is showing the default one. At this point I'm not sure if I'm using the styled function wrong or is something super obvious I'm not seeing. Thanks in advance for any advice!
PS: I don't have enough reputation to post the image directly, sorry for that
The BottomNavigation is defined as follows:
const BottomNav = () => {
return(
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => {setValue(newValue)}}
>
<TabBarButton
id='Home'
label='Home'
icon= {home_icon? <AiFillHome size = "30" />: <AiOutlineHome size='30'/> }
onClick={
(value)=>{
iconHandler(value.currentTarget.id)
}
}
/>
<TabBarButton
id='Documentos'
label='Documentos'
icon= {documentos_icon? <RiEditBoxFill size='30'/>: <RiEditBoxLine size='30'/>}
onClick={
(value) =>
iconHandler(value.currentTarget.id)
}
}
/>
</BottomNavigation>
);
}
To define TabBarButton I firstly tried defining the component like this:
import {BottomNavigation, BottomNavigationAction} from "#mui/material";
import { styled} from '#mui/system';
// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
root: {
color: '#f00',
},
selected: {
color: '#0f0',
}
});
But the rule names: root and selected didn't work, resulting in the default colors being applied:
first-try-bottom-navigation-image
So I changed them to the Global Class instead : BottomNavigationAction CSS :
// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
color: '#0f0',
'.Mui-selected':{
color: '#f00',
}
});
Which worked with the not-selected icon and the labels:
second-try-bottom-navigation-image
But the selected icon 'Home' is still using the default colors, I tried using a variation of the answer provided on this post Bottom Navigation Material UI Override
// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
color: '#0f0',
'.Mui-selected, svg':{
color: '#f00',
}
});
But this affects both icons resulting in :
third-try-bottom-navigation-image
I think TabBarButton need to add '&.Mui-selected' selector to have the styles attached to itself correctly, otherwise with '.Mui-selected' the rules only apply to nested elements:
Tested the example on: stackblitz
// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
color: 'royalblue',
'&.Mui-selected': {
color: 'crimson',
},
});
I am currently using 'createTheme' to customize the theme of my TextField input from Material UI.
To make the changes I am looking at the Material UI default theme on https://mui.com/customization/default-theme/ and making changes to the appropriate labels.
I want to change the default border of the TextField - the border that appears when there is no hover or focus on the TextField. The border is currently grey
Does anyone know which default theme label refers to that border? I can't seem to find it
use inline styling inside a textfield.
<TextField style={{ border:"1px solid color name", }}/>
I used it on main layout :
const useStyles = makeStyles(() => (
{
root: {
"& .css-h5voop-MuiInputBase-root-MuiInput-root:before": {
borderBottom:" 1px solid rgb(215 50 50 / 70%)",
},
}
})
it is a good way and you can use !important to be sure it works
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
"&:before":{
borderBottom:"1px solid yellow ",}
},
},
},
},
})
I am using https://react-select.com/home#getting-started and I am trying to create something as close as possible to this:
The original style of select that I coded (without customStyles function from the select library) gave me something like this:
But as soon as I start adding the styles (customStyles function from the select library) as showed here below:
import { useEffect, useState } from 'react';
// styled components
import styled from 'styled-components';
// icons
import { IoIosArrowDown } from 'react-icons/io';
// select input
import Select from 'react-select';
const ContextItem = ({ text, options }) => {
const [treeNodeNames, setTreeNodeNames] = useState();
// THIS IS FROM THE LIBRARY
const customStyles = {
option: (provided, state) => ({
...provided,
// borderBottom: '1px dotted pink',
color: state.isSelected ? 'white' : 'black',
}),
control: () => ({
// none of react-select's styles are passed to <Control />
width: 200,
}),
singleValue: (provided, state) => {
const opacity = state.isDisabled ? 0.5 : 1;
const transition = 'opacity 300ms';
return { ...provided, opacity, transition };
},
};
useEffect(() => {
if (options) {
const treeNodes = options.data.findTreeNodesByTree.map((element) => {
return {value: element.name, label: element.name };
});
setTreeNodeNames(treeNodes);
}
}, [options]);
return (
<ContextContainer>
<ContextTitle>
<p> {text}</p>
</ContextTitle>
{treeNodeNames && (
<SearchInput>
<Select options={treeNodeNames} styles={customStyles} />
</SearchInput>
)}
</ContextContainer>
);
};
// STYLES
const ContextContainer = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
const ContextTitle = styled.div`
display: flex;
width: 30%;
align-items: center;
justify-content: space-between;
`;
const SearchInput = styled.div`
width: 60%;
padding: 5px;
outline: black;
`;
export default ContextItem;
I get something like this:
So the question is: how do I achieve the desired results showed in the first photo using the customStyles from select without destroying everything? is there a way to have the original react-select's style passed to and modify them accordingly. At the end I just need the:
No border around the select option
The select option moved to the right
same color
But different background on when selected or hovered
and no changed border color when clicked on the selected input field
I hope makes sense, let me know if the question is not clear:) I appreciate any sort of help and clues.
This react-select component is composed of multiple smaller parts.
You're on the right track to apply custom styles. Here is a list of various parts of react-select that you can customize.
The syntax:
const customStyles = {
option: (provided, state) => ({
...provided,
color: state.isSelected ? 'red' : 'blue',
// rest of styling
})
}
For example, if you want to change the text for no options available, you'll style the noOptionsMessage.
Other things to note:
To access the pseudo-classes like :hover for the option component, CSS-in-JS uses this syntax: "&:hover": {...}.
More details on how to inspect and style a component's pseudostates here.
Here is a codesandbox which has the react-select styled close to your first picture.
You can use styled-components then use the base component as the Select you want then change specific things about it as you wish
Here's another SO thread on the matter
Styled-components docs on the matter https://styled-components.com/docs/advanced#issues-with-specificity
Say I have a React functional component with some simple state:
import React, { useState } from 'react'
import { makeStyles } from "#material-ui/core"
export default function Basket() {
const [itemCount, setItemCount] = useState<number>(0)
return (
<div>
<Count count={itemCount} />
<button onClick={() => setItemCount(itemCount + 1)}>
Add One
</button>
</div>
)
}
function Count({count}: {count: number}) {
const classes = useStyles()
return (
<div className={classes.count}>
{count}
</div>
)
}
const useStyles = makeStyles({
count: {
backgroundColor: "yellow",
transition: "backgroundColor 2s ease" // ???
}
}
I want the Count component to apply a property whenever the count changes and then remove it again; say, turn on backgroundColor: yellow for 2 seconds and then gradually fade it over 1 second. What's the simplest way to achieve this?
Note that presumably this could be either triggered by a state change on the parent or by a re-rendering of the child. Alternatively, I could add the key property to <Count/> to force a re-mount of the child:
<Count
key={itemCount}
count={itemCount}
/>
Any of those would be acceptable; I'm looking for the simplest, cleanest solution, hopefully one that doesn't require additional state and is compatible with Material-UI styling APIs.
Just an idea.
const Component = () => {
useEffect(() => {
// will trigger on component mount
return () => {
// will trigger on component umount
}
}, [])
}
...
document.getElementById('transition').classList.add('example')
You can use useEffect along with useRef containing a reference to the element or directly getting it with document.getElementById and then update the transition class that way in component mount/unmount. Not sure if it'll work, I haven't tested it myself.
I am trying to show a basic tooltip when the user clicks on an event in the calendar with a few event details but the tooltip gets covered by the next row.
Currently, I'm trying to use the slotPropGetter prop to change the style of a cell to include z-index: -1 and inline-styling the tooltip with z-index: 1000 but to no avail.
Here's my current component:
export default() =>{
const eventStyleGetter = ({ color }) => {
const style = {
backgroundColor: color,
opacity: 0.8,
zindex: "6",
position:"relative",
};
return {
style: style,
};
};
const slotStyleGetter = () =>{
const style = {
position: "relative",
zindex:0,
height:"100px",
}
return{
style: style
}
}
const CalendarElement = (
<Calendar
localizer={localizer}
defaultDate={new Date()}
events={events}
style={{ height: 500 }}
eventPropGetter={(event) => eventStyleGetter(event)}
slotPropGetter={(slot) => slotStyleGetter(slot)}
onSelectSlot={(e) => handleSlotSelect(e)}
selectable
popup
components={{
event: EventPopover,
}}
/>
);
return(
{CalendarElement}
)
}
The issue isn't the cell z-index, but that of your tooltip. What are you using to render your tooltip? Under the hood, RBC has react-bootstrap#^0.32.4, which uses react-overlay#^0.8.0. If you use react-overlay to create your tooltips, you can portal them, which should automatically handle your z-index issue.
The way to correctly implement this is to use Reactstrap/Bootstrap Popover (based on Popperjs) rather than plain CSS. It worked in this case.