jss

问题 I'm using React, Material UI with JSS and React Router. I'm hooking in to <NavLink> to apply an active class like: <NavLink to={'/dashboard'} activeClassName={classes.active} <button className={classes.btn}>Link</button> /> The class is being added fine to the parent, but I'm having an issue applying the style to the child button if it's a class. When targeting the element it works, just not the class. I've looked into using nested JSS, but this still does not work. Any ideas? active: { '&

问题 Following up the issue on Github, I have a component Comp that when exported, is wrapped with injectSheet from reactjss . Please see the setup on codesandbox . In a unit test, I'd like to assert that that component contains <a> , which it does (see codesandbox), but the test fails regardless: describe("<Comp /> component", () => { const wrapper = shallow(<Comp />); it("should render a <a>", () => { expect(wrapper.find('a')).to.have.length(1); }); }); I get Error: [undefined] Please use

问题 I cam trying to apply override styles to a compiled class name. my compiled code is like... <div class="MuiListItemText-root-262" > I want to be able to target that specific item like this const styles = () => { MultiListItemText-root-262: { color: red; } } in vanilla CSS I could just do .MultiListItemText-root-262: { color: red; } How can I do the equivalent in JSS? 回答1: You cannot do it this way. The classname "MuiListItemText-root-262" is dynamic, and the id "262" is not reliable and may

问题 I have a file named MyButtons.js from which I want to export two stateless functional components one of which contains a style variable. But I get the following error. path/to/MyButtons.js SyntaxError: path/to/MyButtons.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (64:8): 64 | export withStyles(styles)({ AllButtonsRow, UDButtons, }); What am I doing wrong? MyButtons.js import React from 'react'; import { withStyles, } from '@material-ui/core'; const

问题 I have a Playground here: https://codesandbox.io/s/736v9vjzw1 const Something = ({ classes, children, variant }) => { return ( <div className={classes.someThing}> <p> I'm some thing </p> <SomeOtherThing /> <SomeOtherThing> I have some children </SomeOtherThing> <SomeOtherThing> I have some children </SomeOtherThing> <SomeOtherThing> I have some children </SomeOtherThing> </div> ); }; const styles = { someThing: { color: "green", border: "solid 2px black", margin: 30, "& $someOtherThing": {

问题 I'm trying to use https://material-ui.com/ components inside shadow dom, and need a way to inject those styles inside shadow dom. by default material-ui , which uses jss under the hood injects styles in the head of the page. Is that even possible? Can anyone come with an example? 回答1: This is what my web component looks like, it is a web component that renders a react app that contains material-ui styles. import * as React from 'react'; import { render } from 'react-dom'; import {

问题 Material-UI's ExpansionPanelSummary component allows to render an icon inside it via the expandIcon prop, and to change its style by the expandIcon css class. As you can see in the implementation of the component, this class has nested class which adds transform: '&$expanded': { transform: 'translateY(-50%) rotate(180deg)', }, There is no access to this nested class via component's API, and my need is to override it. I have tried to do this with jss-nested plugin as described here and

问题 Running Material UI 1.0.0-beta.24 I'm setting a new theme using createMuiTheme : import {createMuiTheme} from 'material-ui/styles'; const theme = createMuiTheme({ typography: { fontSize: 16 } }); export default theme; How can I access the theme I'm overriding directly here ? I'd like to do this, which is not working : import {createMuiTheme} from 'material-ui/styles'; const theme = createMuiTheme({ typography: { fontSize: theme.typography.fontSize + 2 } }); export default theme; 回答1: You'd

问题 I've used react-jss with material-ui for a while now. The material-ui 3.x -> 4.x migration guide says that MUI 4 isn't compatible with React JSS 9.x: https://material-ui.com/guides/migration-v3/ Furthermore, it looks like the react-jss project has been archived: https://github.com/cssinjs/react-jss ...but JSS is up to at least version 10: https://cssinjs.org/?v=v10.0.0-alpha.16 So I'm completely confused on how to use React-JSS with MUI 4. Is the import something other than "react-jss": "8.6

问题 Currently I am struggling with setting the background color of a MenuItem component which is selected to a different color. (without having to using !important to force it) The component code: <MenuItem classes={{ root: this.props.classes.root, selected: this.props.classes.selected }} value={10}> Alfabetical </MenuItem> This is the css: const homePageStyle = (theme) => ({ root: { width: "300px" }, selected: { backgroundColor: "turquoise !important", color: "white", fontWeight: 600 } }); What