I'm migrating my old css to styled components. I have a React Router link like this:
<Link className="btn btn-primary" to={`/foo`}>Foo</Link>
How can I achieve the same (make the Link look like a Bootstrap button) with styled components and react-bootstrap?
Seems I can use the component property of the Link:
<Link to={`/foo`} component={Button}>Foo</Link>
Button has an href prop to allow this.
<Button href={`/foo`}>Foo</Button>
<Link component={Button} was either removed from Router or was only for Native, but definitely doesn't exist in React Router 6.4.
Related
I am using styled component library to style my website. I want to do changes in my imported react icon component.
for example: if I am use normal CSS then I can easy make changes in
<i class="fab fa-facebook"></i>
by targeting <i> tag in CSS.
but in react I am using react-icon library and i used that icon as component.
for example:
<FaGithub />
how can I make changes like font-size and line-height in that component without using inline CSS and using styled component.
Colours of some icons cant be changed.
Still, there are two ways to do this.
There are some changes that you need to make to your code.
For example your code is like this
<div className="randomClass">
<FaGithub />
</div>
Then at the bottom of the page at the last line you need to style it like this.
const Github = styled(FaGithub)`
color: purple;
transform: scale(2);
margin: 5%;
`;
Once it is done what you need to do is, you need to rename the components to the styled components we created.
//So, instead of
<div className="randomClass">
<FaGithub />
</div>
// It will become
<div className="randomClass">
<Github />
</div>
For a different approach, you can visit here
I am trying to understand if this is a REACT or css issue e.g.. I have the following code below in React component:
<div className="left">
<Link to="/" className="brand">
<img src={Logo} alt="" />
</Link>
</div>
<div className="right">
<div className="primary-nav">
<ul className="navigation">
<li className="active">
<Link to="/">Home</Link>
</li>
</ul>
</div>
</dic>
The first link does not work, mainly if the Link element is wrapped in Div or any other it looks like it is not reloading the page correctly. E.g. Some .js files are not loaded, pictures in the dom, hence page is not working properly. While if I use the second link all works as expected. I don't see a difference in React, hence looks to me a CSS issue?
Once I wrapped the first div element as per below, this worked.
<div className="primary-nav">
<ul className="left">
<li>
<Link to="/index.html" className="brand">
<img src={Logo} alt="" />
</Link>
</li>
</ul>
</div>
Moreover if I replace this Link to a and href element then this works as well!
I am not sure if this would be related as Css issue, and if so, then why would that affect the page reload? Or if this is something straightforward React experts see and is easily fixed?
Don't consider Your React code as a Simple HTML . Actually the thing is That react Uses a JSX code . that mean it bit different Than original html . yaa that is true that at the last React convert jsx code into a Html . but internally react manage a JSX elements .
Now We are Going to your Point href and Link are different thing cause href is html property that uses html default javascript or you can say core javascript but Link mean you are tracking something or we can say manage something using your own javascript .
See Notice One Thing that when you are using a href your page will refresh and when you are using a Link than it may be it will not refresh your whole Dom depends on your coding but when your are working with react you need to use Link for better practice . it will also improve a quality of your web application.
Is there a way to drop in a stylesheet that updates the form elements to material theme?
I'm using a plain HTML page and want the theme to fill in the width and heights of the form elements I have on the page.
I can assign class names to the elements to style them or if the stylesheet would apply to existing elements that would work as well.
You can assign the Material Design classes after you include the asset files in your project header and footer.
CDN:
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
NPM:
npm install #material/form-field
Button Example:
To style the button (submit for example), you add class as following, where foo-button will be your custom CSS to overwrite:
<button class="mdc-button foo-button">Button</button>
Form Example:
To style the form you can follow the Form Fields instruction.
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
...
</div>
</div>
<label for="my-checkbox">This is my checkbox</label>
</div>
The JS part to handle error and validation is a little bit tricky, but if you use the console to manage the handlers etc, you should be able to manage.
I have a complex site that has lots of CSS, including jQuery UI and more.
I have added twitter bootstrap 3 (latest at this time) and I wanted to use it just to style a single link as a button.
Well, I got the button and it is awesome!
But also, somehow my fieldset's <legend> element got a different styling, and my existing menu suddenly started using larger font-sizes, messing up my existing layout.
My impression is therefor that adding twitter bootstrap messes with your existing components, whether you like it or not. I am not sure if it always does this, or if it is a complex interaction between my existing CSS and the bootstrap.
My question: how do I limit bootstrap to styling my single button only (and leave the rest alone)? Is that possible?
My code was:
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="screen" />
.....
<fieldset>
<!-- somehow the legend text below changed from existing pre-bootstrap styling -->
<legend>Menu Selection</legend>
<table>
.....
<a href="#" class="btn btn-default btn-info btn-lg">
<span class="glyphicon glyphicon-cog"></span>
button</a>
Why don't you copy the Button style and include it in custom.css and ignore Bootstrap.css.
I don't think it's a good idea to include a big framework just to style a button/link?
Alternatively, use the Bootstrap customizer to download the parts you 'want' to use.
Also, you can create different versions of the Bootstrap.css file via division.
Here's an image.
I'm new to jQuery Mobile and I'm trying to figure out how exactly to customize buttons. Which classes do i have to use to access certain css properties?
For instance I know that if you want to change the background color of a button you write .ui-btn-inner {background: white;}. But when I do it this way it doesn't work out all the time.
I already looked on the jQuery Mobile API website but I can't seem to find anything that really explains this concept in depth.
If someone could provide me with a website or an explanation about these classes that would be much appreciated.
You can inspect the html to see what jQuery mobile buttons look like.
For a basic button, created by:
Link button
the output looks like:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Link button</span>
</span>
</a>
Create and load a custom CSS file after the jQuery mobile css.
Here you can override individual css classes, like
.ui-btn-inner {
// !important does the trick
background-color: #FF0 !important;
...
}
You sometimes might have to add !important to the css in order to override jQuery mobiles CSS. But I actually do not know when this is necessary, I just do it if it does not work without...
You can look up the structure of all elements in the jQuery mobile CSS, or, as i mentioned before, use the web inspector to see what jQuery turns your markup into.
PS
A more in-depth look at how the CSS works, is provided here