I have a Drawer component that is wrapped using withStyles and overrides some values on the anchorLeft className.
<Drawer anchor="left" classes={{paper: this.props.classes.paper, anchorLeft: this.props.classes.anchorLeft}} ...>
I have some other parts of the app that can effect the top value that needs to be passed to anchorLeft. I am using redux so the top value is being passed through the redux store and sent to my Drawer component through props, so I need a way in the component to effect the anchorLeft top value.
What's the preferred way to do dynamic styling inside the component and change the values in the JSS style sheet? Is there a way to use the JSS sheet.update() and get access to the sheet that way? http://cssinjs.org/json-api?v=v9.0.0-pre.3#function-values
I assume you are using react-jss or styled-jss, in both cases you can use function values and you receive props there already.
Appears as of right now, it's not possible to do with the material-ui withStyles. I had to add react-jss and use injectStyles in the components I needed the dynamic functions, and then add an additional ThemeProvider that took the same theme as MuiThemeProvider so both material-ui and react-jss themes had the same setup.
Issue that's currently being tracked for material-ui related to this functionality:
https://github.com/callemall/material-ui/issues/7633
Related
I just switched to using MUI Material UI, and this is a question about best practices.
How do I get standard MUI styled text throughout my application? Do I need to use Typography everywhere? What about text that I directly render within divs in my components? What about raw header elements?
I guess this also applies to rendering of raw elements like <a>, for example when I use Nav Links from bootstrap (I'm also using react-bootstrap for some components it provides). Is there a way to get the default MUI typography for that?
I know this is a pretty basic question, just want to wrap my head around the best practices when using this library. Thanks!
In Material-UI v4, you were able to use the Mui* class names on any elements and have the styles of those classes take effect, as long as the MUI components that use those classes are incorporated somewhere (thereby injecting the styles into the page CSS). For instance, you could add class names like className="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary" to some HTML element to match all of the styles of a MUI <Link />, like in this codepen. In MUI v5, this has no effect, as can be seen in this identical codepen using MUI v5, despite the fact that the class names are still being used on the MUI <Link /> (just not to apply CSS).
Applying MUI component styles to non-MUI components is important for a few different use-cases, where you need to apply styles to APIs that do not support supplying React components directly. For instance:
When using react-router-dom's NavLink component with its activeClassName prop. In this case, the base component is styled a certain way, and you apply further classes (not props) to modify its styles when the NavLink is the "active" route. In MUI v4, you'd be able to use classes like activeClassName="Mui-selected" (for components that have a selected state), or MuiButton-outlinedPrimary to change a button variant via only classes.
When using external APIs that deal with raw HTML elements, like rich-text editors (Tiptap, Draft.js, etc). It's useful to be able to pass MUI class names directly here so that you can style the rich-text elements to match MUI styles (like the link element in the above codepens).
The only way I can determine how to do this in MUI v5 is to use the deprecated makeStyles and create classes that duplicate all of the MUI styles manually. e.g. duplicate all of the CSS of Mui-Link-root within my own makeStyles call, then use the useStyles() generated class to apply the CSS. This would lead to significant duplication of MUI code and isn't a sustainable or even straightforward option. It would be simple in situations where you can use just the theme, like myBody1: {...theme.typography.body1}, but it's unclear how to do this for other components without copy-pasting from the generated CSS or MUI source.
This is related to this other question Apply MUI styles to non-MUI markup elements, but slightly different in scope, as I would like to reuse MUI's styles via class names I can apply to other elements (whereas that question would like to do so without using class names at all).
I have kendo grid with column re-sizable option. When I double click on column header that column should re-size to auto width (ref:"jsfiddle.net/YF7ny/").
I need this options through MVVM (Model-View-View Model). I am new to this kendo & mvvm concepts, please help me.
To add your double-click handler you would need to make a custom MVVM binder.
There is some documentation on making a custom binder here: http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/custom
Then your grid element could have something like
data-bind="gridColumnResize: x"
Another alternative is to extend the default Grid widget and make your own, and in the init you can add your double-click handler.
Since this is JavaScript, you could even overwrite the existing Kendo Grid widget and add this feature to all grids.
I suppose this could be a general javascript question, but I have a widget that, by default, has a label. I need a way to have a label-less widget. I currently have a special constructor with a boolean indicating whether or not to show this label.
Instead, if I were to add a method to show/hide this label, would it be better use visibility in CSS, or add/remove the label from its parent?
CSS visibility.
However, if you are using GWT and its other cohorts (smartgwt, gxt), setVisible(boolean), show(), hide() is already crafted into their visual components.
When introducing new visual components, you should simply extend the Widget class or any of its subclasses, in order to make full use of GWT features for your new component. The heavy weight of a GWT class Java features is already segregated by the GWT compiler as fixed costs in javascript code - so you might as well extend the Widget class.
And why would you not use the already existent Label class found in GWT (or smartgwt or gxt) and then use the setVisible (or show() hide()) property methods?
I need to create a custom component which can have Label then Textfield and Image, by clicking the image i should select date, that selected date should be populated in TextField,
Is there way i can develop a custom component.
Thanks in Advance!!!
Absolutely!
You need to create a custom widget, and the way to do that is to extend the Composite class.
From the documentation:
A composite is a specialized widget that can contain another component (typically, a Panel) but behaves as if it were its contained widget. You can easily combine groups of existing widgets into a composite that is itself a reusable widget. Some of the UI components provided in GWT are composites: for example, the TabPanel (a composite of a TabBar and a DeckPanel) and the SuggestBox.
Rather than create complex widgets by subclassing Panel or another Widget type, it's better to create a composite because a composite usually wants to control which methods are publicly accessible without exposing those methods that it would inherit from its Panel superclass.
There is a good example to get you started here:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html
The GWT showcase give an example of somthing similar to what you are looking for along with the source code:
"Date Picker" - GWT Showcase
If you want to develop a custom component, look at #Jon Vaughan's answer!
You may also use third party libraries with widgets, like Ext GWT or SmartGWT. Date picker is one of the base widgets that everyone provides.