i am trying to add inside styled component const a switch but i get lost
EX:
background-color: ${({ open }) => (open ? "#ffb900" : "#333")};
i want to add my theme fonction for get color switch with #ffb900
${({ theme }) => theme.hamburger}
but in proper way :)
Thanks
try using styled-theming for theming.
Related
I have this React component which is a simple button component:
const Button = ({ children }) => <button>{children}</button>;
I tried to pass the above component inside a styled in order to try to change its styles like this:
const StyledButton = styled(Button)`
color: yellow; //does not work
button {
color: yellowgreen; //does not work
}
`;
I am new to styled components so I am not even sure this is possible to do.
Thank you in advance for the help!
When using styled-components for your custom React components, styled-components needs to know where to inject the CSS you want to give to your <button> tag. This is done by passing the className prop to your Button component and passing it as a prop to the <button> tag.
Please try to edit your code like so:
const Button = ({ children, className }) => <button className={className}>{children}</button>;
You can read more about it here Styled Components - Existing CSS.
I have a Drawer Component anchored at the bottom but I would still like to interact with the page above the drawer but either I can click out of if but the drawer closes so I tried the variants persistent and permanent both didn't work they actually made it so nothing at all happens when I click out of if. I think it has something to do with the spacing or padding above, but if anyone knows how to disable that, it would be greatly appreciated.
I solved it slightly differently, by removing the "inset" CSS property of the .MuiDrawer-modal div:
.MuiDrawer-modal {
inset: unset !important;
}
Figured out my problem, I ended us having to do some height changes to the Paper component and it seemed to work the way I wanted. You can overrided the css with makeStyles method in the #material-ui/core/styles directory. I used the classes property example
// Outside the component
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
drawer: {
css here ...
}
})
// Inside Component
const classes = useStyles() // the make styles returns a function and calling the useStyles returns an object with the css.
// Inside return
<Drawer
anchor="bottom"
classes={{ paper: classes.drawer }}
>
Content...
</Drawer>
Styled Components let you use props in your CSS, eg.:
styled.whatever`
margin: ${props => props.bigMargin ? '20px' : '5px'}
`;
However, I just tried to use the props in the style name instead:
styled.whatever`
margin-${props => props.leftmargin ? 'left' : 'right'}: 10px;
`;
and when I do that, in the Chrome debugger it looks like:
margin-right: ;
: 1em;
Is it not possible to change your style names using props, or am I just doing it wrong somehow?
The only way I could get it to work was to put both the name and value into the props-controlled part:
${({ leftmargin }) =>
leftmargin ? `margin-left: 1em` : `margin-right: 1em`}};
This works, but if anyone has a better answer (a "DRY-er" one), I'll happily accept it.
In my project i want to change the background-color and font of text. Both the properties are written in css file.
Project structure is:
|-myProject
|--public
|--src
|--package.json
All my css is written in public directory, and i have an api which give response of background-color and font. Now i want to change the properties background-color and font in css files according to api response.
Instead of trying to modify the base stylesheets, why not set these particular properties using the elements’ style attributes:
const divStyle = {
backgroundColor: /* Some color */,
fontFamily: /* Some font stack */,
};
function HelloWorldComponent() {
return <div style={ divStyle }>Hello World!</div>;
}
(adapted from the React docs)
I think the best way to do this would be to use inline style on the elements you want to change.
On api response -> set
const yourVar={
backgroundColor:##,
fontFamily:##
};
I believe that the answer from MTCoster is the best approach. depending on the structure of your app you could use the new Context API to make some sort of theme provider, so that you could pass custom styles that could be stored on your application state and that is loaded from your backend API. there are some tools that could help you integrate this feature more easily, like Styled-Components.
with Styled components you culd write something like:
import styled from 'styled-components'
import { YourComponentJSX } from '../somewhere'
// Wrap the component where you need your custom styles
const YourStyledComponent = styled(YourComponentJSX)`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
/* Color the border and text with theme.main */
// using the short-if to add a default color in case it is not connected to the ThemeProvider
color: ${props => props.theme.main ? props.theme.main : "palevioletred"};
border: 2px solid ${props => props.theme.main ? props.theme.main : "palevioletred"};
`;
// Define what props.theme will look like
const theme = {
main: "mediumseagreen"
};
render(
<div>
<ThemeProvider theme={theme}>
<App>
<YourStyledComponent>Themed</YourStyledComponent>
</App>
</ThemeProvider>
</div>
);
This way you could wrap your whole app and use custom styles saved on the app state that have been loaded from the backend and use them on really deeply nested ui components
*The code is a modification from the styled-component docs
Is there a way to manage the font size of the function definition hover on ST3?
Here's what I see:
I've tried adding font.size to the theme for this element which is popup_control html_popup according to docs but it doesn't appear to accept this.
Update: I found that pasting this CSS in my color theme plist addresses the list/links but not the title. I have tried to use a plugin like ScopeHunter to find the context of the 'definitions' title but it doesn't work for popups.
<key>popupCss</key>
<string><![CDATA[
html {
background-color: #404238;
color: #F8F8F2;
}
a {
color: #66D9EF;
}
.error, .deleted {
color: #F92672;
}
.success, .inserted {
color: #A6E22E;
}
.warning, .modified {
color: #FD971F;
}
]]></string>
The best thing to do is look at the HTML that is used in the popup, to help decide what CSS selectors to use in the color scheme's popupCss to change the appearance of the popup.
In this case, the code is in Packages/Default/symbol.py, which you can view using https://packagecontrol.io/packages/PackageResourceViewer:
<body id=show-definitions>
<h1>Definition%s:</h1>
<p>
...
</p>
</body>
So you can use the following CSS in your popupCSS to target it and change the color of the "Definitions" text, for example - to prove the selector is working (the official recommendation is to use the id from the body tag):
#show-definitions h1 {
color: #b3bc20;
}
however, specifying the font-size seems to have no effect, at least in build 3154, so I think there is a bug in ST.