Does anyone know if this is at all possible. It appears that the only way I have of styling the svg elements appears to be an inline style attribute, passing the style as an object.
Related
Like when I get a search bar component from Flowbite. Can I style just the input element inside that component? If that possible, how?
I want to style my custom React/MUI components by default, but still have the parent MUI ThemeProvider be able to override my styles.
For example, let's say that I have a Button that is green by default (styled in my code), but it should be able to have the colour overridden by a default theme passed down via ThemeProvider.
I can't seem to find anyway to do it as any styling I apply in my component becomes the default as it's the last in the CSS/styling tree.
I couldn't find much information in the documention or github issues about that topic — I can just tell you how to cope with the situation and how it works currently in v5.
It seems like the priority is as follows:
sx > styled() > theme
ie. sx has the highest priority.
At first it seems quite strange that you cannot overwrite something with your theme, but on the other hand you'd also like to be able to overwrite the theme with sx occasionally. So to me the priority makes sense.
You should not use !important in the theme if possible, because it prevents sx and styled() from doing its job.
What you'd do is ship reusable components unstyled (no styled() or sx) and style them via the theme.
Perform the colorization in the theme. Width, height, margins and paddings you can also define via styled() and/or sx if you don't need to change those in the theme.
There are some custom components which wrap more than one element, but allow you to style them individually with multiple style-like attributes.
For example in react-native-elements there's Button: https://react-native-training.github.io/react-native-elements/docs/button.html
The above can accept buttonStyle and containerStyle.
As far as I know, styled-components decorate your component with style. How do I make it target an attribute I'd give it e.g. buttonStyle or containerStyle?
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
I was wondering if the tooltip like this:
tooltip from material-ui
that occurs on icon can be possible onHover of a div?
Or do I have to create it by hand?
I tried this:
tooltip div with reactjs
but none of the 2 solutions is currently working.
can be possible onHover of a div? Or do I have to create it by hand?
You have to create it of course. It is unclear what you mean by onHover, if you want you can use onMouseEnter and onMouseLeave to create relatively positioned tooltip.
Alternatively it is super simple to use a simple CSS tooltip : http://kushagragour.in/lab/hint/ driven by data- attributes (supported natively by react).