how to customize material ui tabs, tabs scroller - javascript

Here I am trying to customize this mui tabs, tab color, and tab bottom border color. I have tried to do so by using makestyles and so on but nothing is working.
my code is,
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
tab:{
"& .MuiButtonBase-root":{
marginLeft:"25px"
}
},
tabs:{
"& .MuiTabs-indicator":{
ml:"30px"
}
}
})
Besides, I also face issues with customizing mui classes. Though I use a solution that is sx props but I know that is not best practice.

const theme = createTheme({
components: {
MuiTabs: {
styleOverrides: {
indicator: {
backgroundColor: 'orange',
height: 10,
},
},
},
}
})

You can style the selected tab styling with the property '&.MuiTab-root.Mui-selected' as for the border coloring for the current tab, you can use the prop TabIndicatorProps and add a styles property,i.e
export const StyledTab = styled((Tab))({
'&.MuiTab-root.Mui-selected': {
color: 'gold',
},
and
TabIndicatorProps={{
style: {
backgroundColor: '#f1db29'
}
}}

Related

MUI React - Override SvgIcon color don't work

I'm using MUI (version 5) on React.
I'm trying to override the icon color for the Error Alert using General StylesOverrides.
I managed to change the color on the Alert component, but I can't find the way to do it for the icon that is in the Alert
In my Overrides Theme this is my code:
const theme = createTheme({
components: {
MuiAlert: { // These changes are working
styleOverrides: {
standardError: {
backgroundColor: colors.error.light,
color: colors.error.dark,
border: '4px solid',
borderColor: colors.error.dark,
}
}
},
MuiSvgIcon: { // These changes are not working
styleOverrides: {
ErrorOutlineIcon: {
htmlColor:'#000000',
main:'#fff000'
}
}
}
},
})
This is the documentation on the MUI website https://mui.com/material-ui/api/svg-icon/ but I'm missing something.
Could you help me, please?
To change the icon color simply do
<Alert color="color.error" />
at place where icon is implemented

Chakra UI for React: change _focus borderColor not work

I set the default theme on Chakra UI for React with extendTheme().
When I try to change the Select component's style like this, the _focus style does not applied, while the color behaves as expected.
Refs
Chakra-UI Style Props
How to change the placeholder color globally?
Captions
Codes
index.ts
import { extendTheme } from '#chakra-ui/react';
import { Select } from './select';
export const theme = extendTheme({
colors: {
brand: '#008561',
brandLight: '#00b485',
},
components: {
Select,
},
});
select.ts
export const Select = {
parts: ['field'],
baseStyle: ({ colorMode }: any) => ({
field: {
color: 'brandLight',
_focus: {
borderColor: colorMode === 'dark' ? 'brandLight' : 'brand',
},
},
}),
sizes: {},
variants: {},
defaultProps: {},
};
To change the focus border color, you have to access the focusBorderColor selector,
This can either be set in the variant you want to change, or in the defaultProps selector of your component theme.
defaultProps: {
focusBorderColor: 'gray.500',
},
Another workaround I have seen, is to set the global shadows to a chakra color, note that any color you define, can also be accessed like the example below
const colors = { mycolor: "#F39C12" }
const shadows = {
outline: '0 0 0 3px var(--chakra-colors-mycolor-500)',
};
const theme = extendTheme({ config, colors, styles, components, shadows });
Workaround was found here: Chakra-UI Issue-663
Hope this helps your project
This worked for me.
_focusVisible={{
outline: "none",
}}

Mui v5 styleOverrides not working with themes

I am trying to style using theme overrides as laid out in the documentation here:
I have the following code sandbox:
import * as React from 'react';
import { ThemeProvider, createTheme } from '#mui/material/styles';
import Select from '#mui/material/Select'
import MenuItem from '#mui/material/MenuItem'
const theme = createTheme({
components: {
MuiSelect: {
styleOverrides: {
root: {
background: '#000',
},
},
},
},
});
export default function GlobalThemeOverride() {
return (
<ThemeProvider theme={theme}>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
variant="standard"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</ThemeProvider>
);
}
The Select box should have a background of #fff however no background is set at all. :(
This looks like a bug to me (or at least missing a feature that is reasonable for developers to expect to be there). The issue is that Select doesn't define any styles of its own at the root level, so it doesn't leverage the code (which would be a call to MUI's styled such as here for the select class) that would take care of looking at the theme and applying the corresponding style overrides. I recommend logging an issue.
There are a couple possible workarounds.
Workaround 1 - Target the select CSS class
This approach may work, but it depends on what all you are trying to do since this targets a child of the root element.
const theme = createTheme({
components: {
MuiSelect: {
styleOverrides: {
select: {
backgroundColor: "#000",
color: "#fff"
}
}
}
}
});
Workaround 2 - Target the MuiInput-root CSS class
The approach below targets the same element as MuiSelect-root by leveraging MuiInput-root (the rendering of the root element of the Select is delegated to the Input component when the variant is "standard") and then qualifying it via "&.MuiSelect-root" so that it only affects Select rather than all inputs.
const theme = createTheme({
components: {
MuiInput: {
styleOverrides: {
root: {
"&.MuiSelect-root": {
backgroundColor: "#000",
color: "#fff"
}
}
}
}
}
});

Use the palette material in the theme and apply it

I am a beginner in material react. I used a palette in the theme in my code, but it shows me a different color code when it displays. please guide me
theme code
import {createMuiTheme} from "#material-ui/core";
const primaryColor="#FF4D23";
const Theme = createMuiTheme({
overrides: {
MuiTypography: {
root: {
fontFamily: "shabnam !important",
}
},
palette:{
primary:{
main:primaryColor,
}
}
}
});
export default Theme;
style code
LogoText:{
color:theme.palette.primary.main,
fontSize:'23px ',
fontWeight:600,
marginRight:'10px'
},
But it shows
**
color: #3f51b5;
**

want to add vertical line between tabs in createMeterialTopTabNavigator

Hy.
I am replicating an app. I am using createMeterialTopTabNavigator. The rest of functionality is working fine. I want to show a vertical line between tabs. but I have no idea where to get started. Please help me.
I want the tabs to show a similar line like the one in the image.
here is my code
import { Text, View} from 'react-native';
import Constants from 'expo-constants';
import {
createBottomTabNavigator,
createMaterialTopTabNavigator
} from "react-navigation-tabs";
import{createAppContainer,NavigationContainer} from "react-navigation";
import ArenaCashScreen from './Screens/ArenaCashScreen';
import ArenaPointsScreen from './Screens/ArenaPointsScreen';
import UnknownCashScreen from './Screens/UnknownCashScreen';
const MainTabs = createMaterialTopTabNavigator(
{
CurrentList: {
screen: ArenaCashScreen,
navigationOptions: {
title: 'Arena Cash (AC)',
},
},
OthersList: {
screen: ArenaPointsScreen,
navigationOptions: {
title: 'Arena Points (AP)',
},
},
thirdlistt: {
screen: UnknownCashScreen,
navigationOptions: {
title: 'Unknown Cash (UC)',
},
},
},
{
tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'white',
indicatorStyle: {
backgroundColor: 'orange',
},
style: {
backgroundColor: 'black',
elevation:0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'black'
},
showLabel: true,
showIcon: false,
},
},
);
const AppContainer2 = createAppContainer(MainTabs);
export default AppContainer2;
You can do this by adding the css style to the tabs.
For this you just open the inspect by clicking F12 and find out the class used for the styling for showing the title and div containing these titles.
Once you find the class, add the border-left by applying the other required sytle like color and width as well as border style.
It can be achieved using tabBarItemStyle property. However, it will add the vertical line on each Tab-bar Item, but in my case vertical line with last item won't show, it works fine
<Tab.Navigator
screenOptions={{
tabBarItemStyle:{borderRightWidth:1,height:Height*0.08,borderRightColor:'red'},
}}
>
{/*Your Tab Screens*/}
</Tab.Navigator>

Categories