javascriptcssreactjsstyled-components
React Styled Components - Gradient
How can I add css gradient to styled component?
background: radial-gradient(50% 50%, circle cover, red 0, blue 100%);
Solution
Gradients in styled-components are the same as in regular CSS, but your gradient syntax seems to be invalid – for example the cover keyword was only in early browser implementations many years ago. Try this instead:
background: radial-gradient(circle at center, red 0, blue 100%);
Read Using radial gradients on MDN for more details.
Also, DevTools (right click > inspect element) will tell you when there is something wrong with your styles:
- Wrapping a wrapper of console log with correct file/line number?
- How to safely polyfill `console.log` without breaking line numbers?
- Harmony proxy, detect whether property was accessed or called
- chrome.runtime.onInstalled is undefined
- d3.js passing in dynamic variable name to d.properties method
- Smooth scroll does not work with transition animation
- How to Change Default Error Text in Yup/Formik?
- Using SplideJS arrows outside of splide
- How to add facebook share button on my website?
- How to combine the results of two observable in angular?
- Bootstrap 3 modal: make it movable/draggable without jquery-ui
- Make bootstrap modal draggable and keep background usable
- How can I fix this framework so the services can be defined in any order?
- How do you JSON.stringify an ES6 Map?
- JS Find indices of duplicate values in array if there are more than two duplicates
- Curly Brackets in Arrow Functions
- Mixed Content The page at was loaded over HTTPS but requested an insecure resource This request has been blocked the content must be served over HTTPS
- Reducing an array of objects in JS?
- React-Redux - No reducer provided for key "coins"
- SyntaxError: Unexpected token in JSON.parse - Invalid JSON format being sent in to the Backend
- How can I avoid state of "TypeError: can't access dead object" in my Firefox add-on?
- How to add Html Content to a new created Iframe in JS
- Efficiently rendering a large number of "select" elements
- How can I capitalize the first letter of each word in a string using JavaScript?
- Call custom hook only on the active component in the DOM
- Nodejs: get filename of caller function
- How do I fix this issue: "node_modules/expo/AppEntry.js: [BABEL]"?
- EventListener not being removed
- How to check if DST (Daylight Saving Time) is in effect, and if so, the offset?
- In React, does creating a click handler outside the JSX have any improvement on performance?