How does one add a css class to a Link component in Next.js?
<Link
className="app-subnav__link"
href="/globalSettings"
>
Settings overview
</Link>
It doesn't like the above! ES Link is throwing an error:
Try this (available in NextJS v13):
<Link href="/globalSettings" className="app-subnav__link">
Settings Overview
</Link>
Reference: https://nextjs.org/docs/api-reference/next/link
Update: in NextJS v13 The next/link child can no longer be . Add the legacyBehavior prop to use the legacy behavior or remove the to upgrade. A codemod is available to automatically upgrade your code.
In next version 13 you can use it directly in the Link component. Here is no need to include the a tag.
apply the style to "a" also work for me
parentElement {
a {
padding:10px
}
}
enclose link inside a <div> . Apply className in the <div> . This might not be the right way to do it but it works
Related
I have seen similar questions but solution suggests to change it through css.
I tried but unable to reproduce the solution for my code. Currently link is looking like this
I also explored react-bootstrap docs but hey haven't mentioned any specific tag to remove that styling
I want to remove that Blue Under Line.
Code :
<ListGroup.Item>
<Link to={`/panelmember/${item._id}`}>
<Card.Title as="h2">
<strong>{item.name}</strong>
</Card.Title>
</Link>
</ListGroup.Item>
Is there Any way to add Short code inside the <Link> tag ? Or if we have to customize it in index.css then can you suggest any solution.
.links {
text-decoration: none;
}
<Link className={`links`} to={`/panelmember/${item._id}`}>
<Card.Title as="h2">
<strong>{item.name}</strong>
</Card.Title>
</Link>
Like this
Bootstrap 4 makes use of Sass for its styling (Sass is a pre-processor scripting language that is interpreted or compiled into Cascading Style Sheets - see https://sass-lang.com/). See https://getbootstrap.com/docs/4.0/getting-started/theming/ for details on Bootstrap theming.
If you are using Sass to compile your CSS file, you can override the default Bootstrap styling for links (which is underline) by adding the following to the scss file (before importing bootstrap):
$link-decoration: none;
Is there a way to disable Tailwind's Preflight on a specific div or component? For example a WYSIWYG editor, or wanting to migrate gradually to Tailwind.
Search about 'unreset tailwind'.
https://www.swyx.io/tailwind-unreset/
download file unreset.scss from https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss
copy it over to your tailwind.scss and namespace it under an unreset class.
.unreset { // paste unreset.scss here! }
And then in your JSX, you can add that unreset class in:
div className="unreset" dangerouslySetInnerHTML={{ __html: post.contents }}
https://www.youtube.com/watch?v=iLEYtgBezhs
I believe the optimal method, if you're using it for basic markdown is to use the the #tailwind/typography package which will allow tags such as <h6> <b> etc...
run npm i #tailwindcss/typography
add require("#tailwindcss/typography") to your plugins in tailwind.config.js
add the className prose prose-lg
<div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: markdownDesc }} />
Found this method in a article here:
https://tjaddison.com/blog/2020/08/updating-to-tailwind-typography-to-style-markdown-posts/
As far as i know it will always load the ui if can find similar classes. Some solution can be
Reducing its priority from other css, by putting it earlier from other css files in initial load.
you can config tailwind.config.js file in a way so that it only generates css that needed
wrapping css with extra identifier so that it can't collide with tailwind classes.
Another option is:
.element-selector {
all: revert;
}
all can set all properties of the element to the initial, inherit or revert value.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/all
i have one little issue that cant resolve myself. I want to remove second box (at bottom) in this page but when inspect CSS found that both elements are defined as :
<pre></pre>
so dont know how to handle that box, and remove it. Form in that page are generated by "User registration & user profile – Profile Builder plugin".
in your css:
:css selector {
display:none;
}
you also can declare in html:
<pre style="display:none;"> </pre>
Try this in your javascript file, or add it in <script></script> in your <head>.
document.getElementsByTagName('pre')[1].remove()
You also have jquery on the site without the traditional $ alias, so you can also do:
jquery('pre').eq(1).remove();
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I'm creating a plugin and it has it's own css file (compiled from sass)
I was just wondering what the best way to approach would be regarding overriding styles.
For example, I set a H1 style for my plugin. How can I make it so that the user does not override this with their H1 style?
I know I could ask them to add my style sheet last but then my style would override theirs.
How should I approach this?
You can use unique id's or class for your elements.
or best way is
<div id="parentWrapper">
<!-- Your plugin's elements goes here -->
</div>
your stylesheet would be
#parentWrapper h1 { // h1 definition
}
#parentWrapper p {
}
.
.
.
The best way to avoid style collision is to ring-fence your plugin from what a user may be implementing in their own code by adding plugin specific classes to elements.
E.g. you would style h1 by adding a class called say myPlugin-h1
<h1 class='myPlugin-h1'></h1>
You could then either use your plugin to add these styles into the DOM, or require the user chooses where to add them (preferred).
That said..Typically plugins allow users to add a single class to a 'top level' element to denote it should have a plugin applied, and then the plugin stylesheet prefixes elements by this class, or assigns classes to child elements dynamically.
So, in your HTML you may have:
<div class='myPlugin'><!--
content either dynamically added by your plugin or already present
--></div>
Then your plugin CSS would include .myPlugin h1
Just add a class to your h1 tag and that will do the trick.
You do not need to add an !important tag to the <h1>, that will prevent the class to take it's course.
HTML
<h1>Hi</h1>
<h1 class="blue">This</h1>
CSS
h1{
color:red;
}
.blue{
color:blue;
}
And a working demo : http://jsfiddle.net/52Jd5/2/