I want to change the underline of:
I use material ui version 4.12.3
The code for creating my tabs is here:
function renderTabs(): JSX.Element {
return (
<Tabs className={classes.tabBar} value={activeTab} component={Paper} onChange={handleChange} centered>
{TABS.map((tab: string) => {
return (
<Tab
className={classes.tabButton}
key={`tab-${tab}`}
label={tab}
value={tab}
component={Link}
to={`${url}/${tab !== TABS[0] ? tab : ''}`}
/>
)
})}
</Tabs>
)
}
and in my tab_menu.style.ts I have the following code:
export default makeStyles(() =>
createStyles({
root: { width: '60%', margin: 'auto' },
tabBar: {},
tabButton: {},
})
)
I tried to change colors/background colors/text decorations in the tabBar as well as the tabButton, but the blue underline never changed.
How can I change the underline style?
As per material-UI documentation (Tab API, Tabs API) , you need to pass classes instead of className as a prop. Just write classes instead className.
Related
I am attempting to style the from-to of x rows number on a Material-Table, via
import MaterialTable from 'material-table'
import { TablePagination, withStyles } from '#material-ui/core'
const StyledPagination = withStyles({
caption: {
'&.MuiTypography-caption': {
fontSize: '1.5rem !important'
},
fontSize: '1.5rem !important'
}
})(TablePagination)
<MaterialTable
**Other Props Here**
components={{
Pagination: props => (
<StyledPagination
{...props}
labelRowsPerPage={<div>{props.labelRowsPerPage}</div>}
labelDisplayedRows={row => (
<div>{props.labelDisplayedRows(row)}</div>
)}
/>
)
}}
/>
I feel like those two css selectors should be redundant, but neither is working. I feel like material-table is overriding them as the computed font size is 0.75rem .MuiTypography-caption. Have also attempted styling via the root rather than caption with no difference there either.
I have been able to style the dropdown selector for number of rows to display, which seems like the same should apply to this. Originally started with this approach, which also did not work.
Ended up solving this with MuiThemeProvider, I dont think the normal ThemeProvider is working with Material-table
import { createMuiTheme, MuiThemeProvider } from '#material-ui/core/styles'
const theme = createMuiTheme({
overrides: {
MuiTypography: {
caption: {
fontSize: '1.5rem'
}
}
})
then,
<MuiThemeProvider theme={theme}>
<MaterialTable />
</MuiThemeProvider>
Although, this will style anything with class MuiTypography-caption
I am using Material UI Select component inside my React project.
I am trying to override the CSS class .MuiPaper-root and or .MuiMenu-list.
My Select component:
<Select
value={selectValue}
disableUnderline
onChange={handleChange}
css={styles.select}
>
{cities?.map((city) => {
return (
<MenuItem
key={city.value}
value={city.value}
css={styles.selectItem}
>
{city.label}
</MenuItem>
);
})}
</Select>
Below isn't working?
export default ({ theme }: StylesProps) => ({
select: css`
.MuiPaper-root {
background-color: red;
}
`,
});
According to the doc, there are several ways that we can modify styles in MUI. In order to change MuiPaper, we can take advantage of createMuiTheme and create a theme as below to override MuiPaper:
const theme = createMuiTheme({
overrides: {
MuiPaper: {
root: {
color: "white"
}
}
}
});
Then, we need to pass it as a theme prop to the ThemeProvider component:
<ThemeProvider theme={theme}>
//***Other part of your code***//
</ThemeProvider>
when it comes to changing MenuProps in the Select component, we can use a property called MenuProps in the Select component(description in doc)
First, I created a list style in useStyles:
const useStyles = makeStyles((theme) => ({
//other classes//
list: {
backgroundColor: "blue"
}
}));
and then passed it as a MenuProp property to the select component:
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
MenuProps={{ classes: { list: classes.list } }}
>
//***other part of your code***//
</Select>
Here is a codesandbox example that I've created for this example. In the Muipaper modification, I changed the color of the text to white. And in the MenuProps changed the background color to blue.
I'm new to Material UI and I'm struggling.
I have a button component
export default function TheButton(props: PropsWithChildren<Props>) {
const { className, hover, level,...rest } = props;
const classes = useStyles();
return (
<Button
{...rest}
className={clsx(classes.root, className, hover === 'contained' && classes.hoverContained)}
>
{props.children}
</Button>
);
}
From this component, I'd like to have two variants: contained and outlined. Here is my outlined button.
<TheButton
variant="outlined"
color="secondary"
>
secondary
</TheButton>
When the variant outlined is selected the button has the class Muibutton-outlined. I'd like to override this class to change the border (only in the outlined variant, so only on this class).
So far I've tried something like:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'.MuiButton-outlinedSecondary':{
border:"2px solid red" ,
},
}
)
It doesn't work.
I have a similar setting, and I tried:
adding a class submit to my button component
<Button
type="submit"
variant="outlined"
disabled={isSaving || invalid || unchanged}
color="secondary"
className={classes.submit}
>
SAVE CHANGES
</Button>
since I have the submit class I can be more precise in my styling like so:
const useStyles = makeStyles({
submit: {
marginTop: padding.medium,
marginLeft: padding.small,
'&.MuiButton-outlinedSecondary': {
border: '1px solid pink',
},
},
});
Here is the result:
Material-ui button with pink border image
As long as I have used Ant design ui kit and I have overrided styles on its default style like this:
<Button type="primary" className={styles.custom_css}>click</Button>
This has done in react and custom_css class overrides its styles on default
This might can help you, if not please let me know
I'm looking for a way to customize the color of the text inside the Tab component but at the same time retaining the ability for it to be colored over when selected as an active Tab.
Example code:
<Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorColor={'secondary'}>
<Tab label={'Hello There'} style={{color: '#fff'}}/>
<Tab label={'Hello There'} style={{color: '#fff'}}/>
<Tab label={'Hello There'} style={{color: '#fff'}}/>
</Tabs>
The above code will result in the change of the text color BUT when the Tab becomes active, it won't be overridden.
If it helps, I'm also using styled-components for ease of use.
You can use the makeStyles export of material-ui to create your custom class for the label
import { makeStyles } from "#material-ui/core";
const useStyles = makeStyles({
customLabelColor: {
color: "#fff"
}
});
export default function App() {
const classes = useStyles();
return (
...
<Tab
label={"Hello There"}
classes={{
textColorSecondary: classes.customLabelColor
}}
/>
...
);
}
CodeSandBox: https://codesandbox.io/s/quirky-kowalevski-xzf7g?file=/src/App.js
Refer here for other methods on how to override the CSS for Tab.
On the same reference I linked, have a look at the textColorSecondary rule name. This is specific to your question since you are using textColor="secondary" on your parent component Tabs
Trying to figure out how to override the styles of the tabs indicator using styled from Emotion. I am not sure how to access nested classes. This is what I have, but it isn't getting me there:
const StyledTabs = styled(Tabs)(
{
classes: {
indicator: {
background: 'black',
},
},
}
);
Any help would be awesome!
There are a couple issues. styled from Emotion only supports generating a single class name per usage. It doesn't provide any support for the classes: {indicator: {styles}} structure in your example.
Below is a syntax that allows you to use styled to provide a class name for the "indicator" class of Tabs:
const StyledTabs = styled(({ className, ...other }) => {
return <Tabs {...other} classes={{ indicator: className }} />;
})({
backgroundColor: "black"
});
However, this does not work completely robustly because the <style> element for the Emotion styles does not consistently occur after the <style> elements from JSS (used for Material-UI's styling) in the <head> of the document. I'm not sure how to alter the insertion point for Emotion's styles, but you can read here about how to change the insertion point for JSS. I've included this approach in my sandbox below.
Here's a sandbox that shows this working:
Another syntax option is the following which will allow you to control more than one Tabs class:
const StyledTabs = styled(({ className, ...other }) => {
return <Tabs {...other} classes={{ root: className, flexContainer: "flexContainer", indicator: "indicator" }} />;
})({
"& .indicator": {
background: "black"
},
"& .flexContainer": {
flexDirection: "row-reverse"
}
});