Not able to assign custom class to tooltip component in order to update the style of tooltip component
Tried by assigning to classes property
Posted at https://codesandbox.io/s/twilight-fire-907mp
Make your own Tooltip with custom styles and then use it:
const TooltipWithBiggerFontSize = withStyles({
tooltip: {
fontSize: 30
}
})(Tooltip)
As you already did with other components, eg: DialogContent or DialogActions.
Usage
<TooltipWithBiggerFontSize title="Custom Search">
<Publish />
</TooltipWithBiggerFontSize>
BTW, your code is confusing. You are mixing functional and class components. Once, you are styling with withStyles once with makeStyles.
You should choose one method and stick to it. Here is styling docs. It will solve most of your problems.
codesandbox
Related
I've made two Material-UI components. Both are using themes. However, the overrides on one theme are being used in the other! I'm losing my mind trying to find a solution to this. Here is the code:
This is being used for component1:
const themeForComponent1 = createMuiTheme({
overrides: {
MuiInputLabel: {
root: {
padding: '13px 0 0 13px !important'
}
},
},
})
...and it is changing stuff in component 2, which happens to also have an element with the class "MuiInputLabel-root".
(edit: If it helps at all, the component is being called in Formik using the Field element via the "as" prop. Each component is using its own ThemeProvider element.)
If you want to have two themes independent you can see the Material UI documentation here
https://material-ui.com/styles/advanced/
But in the fact yo should use two theme providers. I say you that you should use an only theme and customize your component styles using Material UI functions to do that like CSS class
I have a custom component and would like to apply the exact same styles as the <Typography> component gets when setting the noWrap prop. The following does work:
<span className="MuiTypography-noWrap">
But there's of course no actual type-checking or "link" to anything here, which means if the name ever changes or is removed in a future version, I won't get any type/build error from it.
Is there a "Material UI way" to reuse/copy these classes? E.g. is there somewhere I can import/access these names from?
I assume you have a reason, but given your example of a span element, I can't help but wonder why you're not just using the MUI component.
I've never done this before, but I was curious and the styles are indeed exported. Not sure if this is a good idea or if there is another way...
import { styles } from '#material-ui/core/Typography/Typography';
const noWrapStyles = styles(theme).noWrap;
I am wondering if there is a neat trick to use a component classes prop to override some CSS defined in a theme's overrides.
For instance :
If I want all Button components to have a different font-size than the default one. I can use the theme.overrides props to do so :
// this works, all Buttons text is 1.1rem
let theme = createMuiTheme({
overrides: {
MuiButton: {
label: {
"&": {fontSize: "1.1rem"}
}
}
}
})
Now if for some reason one of my button needs to have a different font-size, I was hoping using classes prop would do the job :
const useClasses = makeStyles({
smallerFontSize: {
fontSize: "0.9rem"
}
})
...
const classes = useClasses()
...
<Button
classes={{
// unfortunately this doesn't work, theme overrides is taking precedence
label: classes.smallerFontSize
}}
>
Some smaller text
</Button>
...
Since using classes prop allows us to target and override some component's CSS if default theme values have not been overridden, I find it confusing that theme overrides end up behaving somewhat differently and have a higher specificity than a one time rule.
I'd argue it kind of defeats the purpose of having a customisable theme.
But hopefully I'm missing something and your wisdom will help !
UPDATE
My mistake was to export the created theme and the makeStyles hook from the same module file.
Doing that made Mui insert theme <style> after the hook <style>.
To fix the issue and be able to use classes component props as I wanted to :
export theme and hooks from separate modules
make sure theme module has no dependency on the module exporting the hook
make sure when using ThemeProvider that it has no parent component importing the hook
I still don't quite understand why things worked before I added the overrides property on the theme object though.
I'm trying to use the Grid component but I can't find out how to use the CSS API. Ths docs doesn't help me. I just don't get it..
Can someone please help me ?
I know this is not a really good place, sorry, but I can't find any answer anywhere confused
Ideally, you'd set direction to row and override the direction-xs-row class with the name of a class you define (which would set direction to column-reverse), but there are no classes exposed for overriding row for any breakpoint.
You could go the other way, setting direction to column-reverse and overriding direction-*-column-reverse (for all other breakpoints), but that would be tedious and somewhat insane.
The only way to do this at the moment would be to set the className prop to apply some responsive styling via JSS and withStyles:
// create a class that will set flex-direction for the xs breakpoint
const styles = theme => ({
[theme.breakpoints.down('xs')]: {
responsiveDirection: {
flexDirection: 'column-reverse',
},
},
});
// use withStyles to make the class available via the `classes` prop
export default withStyles(styles)(InteractiveGrid);
Then pass your class name, classes.responsiveDirection in this example, as the Grid's className prop:
{/* we would normally destructure classes from this.props */}
<Grid
container
className={this.props.classes.responsiveDirection}
>
Check this codesandbox for a working example.
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.