css-in-js

Random classes getting displayed when we use styled components?

由 喜你入骨 提交于 2020-12-06 06:51:33
问题 Am using styled components in React. Whenever i write the styles in styled component and if loads the application in the browser am getting some random classes name in the elements tab of developer tools. I just want to know whats happening behind the scene? const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ` render( <div> <Button href="https://github.com

Random classes getting displayed when we use styled components?

由 天大地大妈咪最大 提交于 2020-12-06 06:49:12
问题 Am using styled components in React. Whenever i write the styles in styled component and if loads the application in the browser am getting some random classes name in the elements tab of developer tools. I just want to know whats happening behind the scene? const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ` render( <div> <Button href="https://github.com

Material UI global css variables

由 限于喜欢 提交于 2020-08-09 07:18:41
问题 I would like to declare some css variables that I will reuse among my components. This is how you do it with plain css: :root { --box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3); } That would then be used as follows: .my-class { box-shadow: var(--box-shadow); } How can I achieve the same with useStyles? I tried the following with no avail: const theme = createMuiTheme({ shadowing: { boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)", } }); My main App is enclosed within <ThemeProvider theme={theme}

Material UI global css variables

由 不问归期 提交于 2020-08-09 07:18:07
问题 I would like to declare some css variables that I will reuse among my components. This is how you do it with plain css: :root { --box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3); } That would then be used as follows: .my-class { box-shadow: var(--box-shadow); } How can I achieve the same with useStyles? I tried the following with no avail: const theme = createMuiTheme({ shadowing: { boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)", } }); My main App is enclosed within <ThemeProvider theme={theme}

Multiple Props Options for Styled Components

由 随声附和 提交于 2020-06-26 04:33:12
问题 I have a navbar component that I have created using Styled Components. I would like to create some props that change the background-color and/or text color. For instance: <Navbar dark> should have the following CSS: background: #454545; color: #fafafa; Whereas <Navbar light> should be the opposite: background: #fafafa; color: #454545; If, however, neither prop is used, then I want to have a default background and text color -- say (for demo purposes), something like this: background: #eee;

how to validate / lint styled-jsx in NextJS?

由 余生长醉 提交于 2020-03-05 06:07:31
问题 I am using nextJS for development, for stylelint to validate my .scss and .css files. I'm also using styled-jsx or css-in-js for component level styling (it's kind of requirement) and want to know if there's some library to validate styled-jsx below is the code sample of my css code. <style jsx>{` .HeadText { color: ${myColors['color-primary']}; } `} </style> I've tried using this library but it work's for only static styles like below : <style jsx>{` .HeadText { color: red; bad-property:

how to validate / lint styled-jsx in NextJS?

由 余生颓废 提交于 2020-03-05 06:07:10
问题 I am using nextJS for development, for stylelint to validate my .scss and .css files. I'm also using styled-jsx or css-in-js for component level styling (it's kind of requirement) and want to know if there's some library to validate styled-jsx below is the code sample of my css code. <style jsx>{` .HeadText { color: ${myColors['color-primary']}; } `} </style> I've tried using this library but it work's for only static styles like below : <style jsx>{` .HeadText { color: red; bad-property:

What is the JSS syntax for referencing generated class names called?

由 流过昼夜 提交于 2019-12-24 21:24:15
问题 Material UI uses JSS at its core and you sometimes need to override styles from their base components. Example from Input: '&:hover:not($disabled):before'{ ... } I cannot find this syntax mentioned in the JSS syntax docs, so it's hard to discuss with others without a common name. What is it called? 回答1: This functionality is made possible through a plugin for nesting. The plugin itself describes this as "nested selectors", which is also usually the term you will find being used to describe it

How to use react-jss with MaterialUI 4?

由 牧云@^-^@ 提交于 2019-12-08 05:43:36
问题 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

How to use react-jss with MaterialUI 4?

由 只愿长相守 提交于 2019-12-06 15:48:57
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.1", in package.json ? Should I switch to Emotion or Styled Components? So confused. You can use: "react
订阅 css-in-js