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.
I want to make the content of a div respond to its size, much like if
it was an iframe, but I can't use one.
My intent is to make the content adapt as if it was in a real smaller
screen so the user can preview the div content on mobile devices.
The iframe works, but it breaks react's diff algorithm, so I can't change the frame contents using the parent props anymore.
So, I want to be able to resize a div which will make it's contents responde
to it's media queries like if they are on a smaller window.
const Index = ({format}) => {
const classes = useStyles ({format})
// if I use iframe instead of div, the breakpoints works,
// but it breaks a lot of app logic
return <div className={classes.root}>
<ChildrenToPerceiveBreakpoint/>
</div>
}
const useStyles = makeStyles(theme => ({
root: props => ({
overflow: props?.format ? 'auto' : 'visible',
maxWidth: props?.format === 'mobile'
? 'min(414px, 100%)'
: props?.format === 'tablet'
? 'min(768px, 100%)'
: '100%',
maxHeight: props?.format === 'mobile'
? 'min(736px, 100%)'
: props?.format === 'tablet'
? 'min(1024px, 100%)'
: '100%',
margin: '0% auto',
marginTop: props?.format === 'mobile'
&& theme.breakpoints.down('md')
? '5%'
: '0%',
}),
}))
I'm using material-ui and jss for the styling.
Thx!
I wanted to add dark mode feature in my React app that uses Material UI. So, I headed to the documentation and referred a few stackoverflow posts, and did the following:
const MaterialTheme = ({ children, colorTheme, darkMode }) => {
const mode = darkMode ? 'dark' : 'light';
const theme = React.useMemo(() => {
const {
primaryColor,
primaryColorHover,
accentColor,
accentColorHover,
} = colorTheme;
return createMuiTheme({
palette: {
type: mode,
primary: {
main: primaryColor,
dark: primaryColorHover,
},
secondary: {
main: accentColor,
dark: accentColorHover,
},
}
});
}, [colorTheme, mode]);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
};
However, is changing my font sizes and shapes.
The sizes of a lot of my custom components were decreased and circles were changed into ellipses, even though on inspecting, the border-radius was still 50%.
However, the documentation states that CssBasline has to be added in order to apply dark mode throughout the app.
With CSS baseline (light mode):
Without CSS baseline:
What is wrong with what I have done?
P.S: This is how I'm using MaterialTheme:
<Router history={history}>
<PersistGate persistor={persistor}>
<MaterialTheme>
<Suspense fallback={<PageLoader />}>
<Switch>
// my routes
</Switch>
</Suspense>
</MaterialTheme>
</PersistGate>
</Router>;
I am trying to customise the DateTimePicker from Material-UI. Here is its documentation: https://material-ui-pickers.dev/api/DateTimePicker
There is no section for the styling. I want to change the main color for all the coloured components. What I've tried so far is using the general theme documentation and try to change the style of the theme:
const theme = createMuiTheme({
status: {
danger: '#FF72B1',
},
dateTimePicker: {
headerColor: '#FF72B1',
selectColor: '#FF72B1',
},
datePicker: {
selectColor: '#FF72B1',
headerColor: '#FF72B1'
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
)
}
As far as I understood from the theme documentation, the only thing that I've done so far is defining variables with styles, but they are not going to be applied. I have to specify them in the exact component, and here comes the tricky part.
In my Material-UI DateTimePicker:
function MaterialDateTimePicker() {
const classes = useStyles()
return (
<Fragment>
<DateTimePicker
label={label}
inputVariant="outlined"
value={value}
onChange={onChange}
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
</Fragment>
);
}
I have tried to applied the styling:
const useStyles = makeStyles(theme => ({
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
checked: {},
}));
This is how I've been trying to style components with this library, based on research, reading the docu, and some SO answers:
How to change material UI select border and label
So basically you have to go to the documentation, try to find the .XXX class that matches the component that you want to customise, and if documentation is missing, you have to go to the DOM, and start looking for this class.
I did that, but I have a couple of questions:
1) In my particular case, I have the problem that on my DateTimePicker I apply the root classes, which are on the input component level. The calendar that pops up, is not a children of this component, it's open by javascript, therefore I don't know how to access it.
This syntax does not work any longer:
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
Because root is the input, not the calendar that pop ups.
2) Is this really the way to go with this library? Because all the answers on SO and complains go on this direction. Does anybody know another strategy?
3) In #material-ui/pickers node_modules folder I couldn't find the css file. I would like to pick it and customise there, like it's possible for react-dates library etc. Is that possible? Where are the css stylings?
I've prepared a sandbox with what I've tried:
https://codesandbox.io/s/inspiring-napier-zh4os
(Unfortunately the utils library is installed but not working, locally in my computer the picker works fine, I just can't style it)
I'm working with this right now, wat i did to partially override the styles is to wrap in a ThemeProvider (you can pass your theme trow your component)
<MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={defaultMaterialTheme}>
<KeyboardDatePicker
...
/>
</ThemeProvider>
</Grid>
</MuiPickersUtilsProvider>
And your theme could be something, like this
import { createMuiTheme } from '#material-ui/core'
const defaultMaterialTheme = createMuiTheme({
overrides: {
MuiPickersCalendarHeader: {
switchHeader: {
color: '#6A148E',
textTransform: 'uppercase',
},
dayLabel: {
textTransform: 'uppercase',
},
},
MuiPickersDay: {
day: {
color: '#707070',
},
daySelected: {
backgroundColor: '#6A148E',
'&:hover': {
backgroundColor: '#6A148E',
},
},
current: {
color: '#6A148E',
},
},
MuiSvgIcon: {
root: {
fill: '#6A148E',
},
},
MuiOutlinedInput: {
root: {
'&:hover': {
border: '10px solid red !important', // i'm struggling with this :/
},
},
},
},
})
export default defaultMaterialTheme
Hope it's help
I think you just need to cancel out the webkit appearance. There are a couple of ways to cancel out specific webkit styles (so you can add your own).
Try the following:
-webkit-appearance: none;
ReactJS inline styles: webkitAppearance: "none";
Also check out other -webkit-[] functions... There are functions for more specific elements such as borders, colours, etc...
Hope this helps :)
I have made a login button which will jump to main-ui. I don't want people to see the back button at top-left position of navigator's default style.
It seems that NavigatorIOS has no suitable API to use. Can you give me some idea?
You'll have to use Navigator. I recommend using it in conjunction with React Native Navbar.
With Navbar, you can pass in the right and left button components... Or just make them an empty view, if they shouldn't be visible. The property is leftButton and rightButton.
The navigator example on the React docs should get you started:
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
<MySceneComponent
name={route.name}
onForward={() => {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
Now in the definition of MySceneComponent you would include displaying NavBar:
const MySceneComponent = (props) => (
<View style={{ flex: 1, }}>
<NavigationBar
title={titleConfig}
rightButton={BUTTON_OR_NOT}
{...props} />
{props.children}
</View>
);
Of course you will want to abstract your navigation bits perhaps into a component which displays the navigation bar around it as I have shown above with the display of {children}. You will further want to pass the route and navigation information into Navbar so it can display the page information and make it so that clicking on the back button calls navigator.pop(), which is what I did by passing on props via {...props}.