How to set the default style to a React Component

The React component is great because it lets us define our own tags, which can be more powerful than the original ones.

Currently I am only using the React component to define the HTML structure, and setting the className of each tag to let the style sheet modify its appearance. Is there a way to give a default style to components without using inline CSS?

One idea I have is to add one CSS file associated with one component, or add a tag directly in the jsx file for each component, then compile the CSS or jsx to put all the CSS in one file and added it in part.

-------------Problems Reply------------

It is easily expressed with inline style approach in React:

var compStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
margin: 5
};

React.render(<div style={compStyle}>Component</div>, mountNode);

Category:javascript Views:2 Time:2018-02-12

Related post

  • How to set the default style/format for Visio 2010 2013-01-04

    What is the recommended procedure to set shape & text defaults for the session? For all sessions (if possible)? I am unable to set such things as line color, fill color, text font and size and shadow such that they stick for the next new shape or

  • How to set the default table style when opening an HTML file? 2014-07-30

    I am using Autocad to create an HTML file of a report. The HTML file is setup in multiple tables. When I open the file in Word 2010, the tables are not consistent in column width and, as a result, some entries "wrap" within the cell and create a row

  • WPF Setting the default style on a TextBlock overrides the style for a Label 2010-02-05

    Setting the default style on a TextBlock causes the style in the Label and other controls to be set as well. This only happens if you put the styles in the Application resources, when I place the style in the Window resources everything is fine. I ha

  • Highlighting and Toggling between links - How to set the default class 2011-05-29

    Good day everyone! I have this piece of code I am trying to get to work. I have been searching this forum, came pretty close but can get it. I am trying to toggle between links to highlight the current link. This has been discussed on here, however I

  • Excel 2007: How to set the default font for the entire workbook in a template? 2013-04-20

    Hi, May I know how to set the default font style for the entire workbook in an Excel template? Thanks Low --------------Solutions------------- Hi, set the default font style in the Excel Options > Popular tab > Use this font. Regards, Frank If

  • Does anyone know how to set the default registry value for a key using JNI-Registry (com.ice.jni.registry)? 2010-03-03

    I'm currently trying to query and set some windows registry entries through a Java app. We are mandated to use the JNI-Registry library (for licensing reasons). The keys and values to set are not under my control (I'm modifying values set by another,

  • How to set the default icon for all Java Swing windows? 2010-07-06

    How to set the default icon for all Java Swing windows? Otherwise i have to set icons for every frame i created. What's your suggestions? Simple hackings are also accepted. many thx Update: Best if the method you suggested can leave existing frame-cr

  • how to get the default style and control template of WP7 control? 2011-07-20

    they have the styles and templates for WPF and Silverlight controls published on MSDN. but not for the WP7 controls. So, how to get the default style and control template of WP7 control ? --------------Solutions------------- In your SDK folder C:\Pro

  • How to set the default printer for envelopes 2012-08-14

    Original title: HOW TO SET THE DEFAULT PRINTER FOR ENVELOPES. I keep changing it to automatic and it reverts back to manual. --------------Solutions------------- There is an example at 'Print to a specific printer' that demonstrates how to use a macr

  • Is there a way to set the default style to 0 line spacing as opposed to "Auto"? 2013-12-16

    I'd like to set the default style in repsonding to emails so that line spacing is "0" both before and after. However, the default seems to be "Auto," which substnatially increases the line spacing. I've attempted to set the line spacing to 0, highlig

  • How to set the default view settings in windown explorer 2014-03-26

    For the most part windows 7's windows explorer has been a bummer. When I open it, the right hand pane is too narrow for most of my file names and I also would like to see the details at the same time. The drag to widen feature (double arrow icon thin

  • How to set the default (submit) button for a page loaded in an iPhone UIWebView (stringByEvaluatingJavaScriptFromString?) 2009-10-31

    I'm using a UIWebView to load an HTML form in my iPhone app. The form has three submit buttons (and selecting "Go" on the iPhone keypad selects the first submit button). I'm assuming that I can set a different "default" submit button with Javascript

  • How to set the default font for a WPF application? 2010-06-29

    I want to be able to define a font family for my WPF application. Preferably using a resource dictionary as a theme referenced from App.xaml. I've tried creating a Style as follows: <Style TargetType="{x:Type Control}"> <Setter Property="Fon

  • How to set the default location of the FCKEditor file browser? 2008-11-10

    I'm working the the image upload piece of the FCKEditor and I've got the uploading working properly but am stuck with the server file browser. You can see in the dialog above has a Browse Server button which pops up the following dialog The problem i

  • Insert Tracepoint: how to set the default message? 2009-01-21

    In MS VisualStudio (I'm using 2005), it's possible to right-click in some code file and 'insert tracepoint' right there. The default message printed when the tracepoint is hit is Function: $FUNCTION, Thread: $TID $TNAME. I would rather have it differ

  • How to set the default value of an Access 2003 field using SQL? 2009-04-27

    How can I set the default value for a field using SQL in MS Access? I tried this but got a syntax error: CREATE TABLE HELLO ( MUN INTEGER NOT NULL, ADD CHAR(50) DEFAULT'16 asd ST.' ) --------------Solutions------------- The word ADD is a keyword. Try

  • How to set the default value of Colors in a custom control in Winforms? 2009-10-05

    I got the value to show up correctly using: [DefaultValue ( typeof ( Color ), "255, 0, 0" )] public Color LineColor { get { return lineColor; } set { lineColor = value; Invalidate ( ); } } But after I reload the project the control is used, this valu

  • How to set the default debug page in MVC 2? 2010-01-06

    In MVC 1 in VS2008, you could right click the Default.aspx page and set as default page, then hit debug and land on the home view (even though Default.aspx was something else). In MVC2, Default.aspx isn't there, so how do you set the default document

  • How to set the default hydrator in Doctrine? 2010-01-14

    I can't find a way to set the default hydrator in Doctrine. It should be available. Right? http://docs.doctrine-project.org/projects/doctrine1/en/latest/en/manual/data-hydrators.html#writing-hydration-method The above documentation page explains how

  • How to set the default selected value of Dropdown on ASP.NET MVC View page 2010-01-29

    I have a dropdown that i need to set the default selected value from the database. Example: <%= Html.DropDownList("state", " -- Select one -- ")%> The above code binds records from the ViewData["specialty"] from my entity model. And "Select One

  • How to set the default storage engine to InnoDB in XAMPP 2010-02-18

    How do I set the default-storage-engine to InnoDB in Linux XAMPP 1.7.3? --------------Solutions------------- The easiest way is just to go to the mysql config file (my.ini in windows, my.cnf in Linux) and just add this: [mysqld] default-storage-engin

  • How to set the default XML namespace for an XDocument 2010-05-20

    How can I set the default namespace of an existing XDocument (so I can deserialize it with DataContractSerializer). I tried the following: var doc = XDocument.Parse("<widget/>"); var attrib = new XAttribute("xmlns", "http://schemas.datacontract

  • How to set the default .Net framework version for projects in visual studio 2010 2010-10-13

    How do you set the default framework version for new projects in Visual Studio 2010? --------------Solutions------------- The easiest way I know of is the following File -> New Project Select the Framework you want Create the project From then on

  • how to set the default value for grouped choices in django 2010-10-18

    If I have some grouped choices for a models.IntegerField, how can I set the default value to a combination of those choices ex: class ForumThread(): STATE_CHOICES = ( ('Sticky', ( (True, 'True'), (False, 'False') ) ), ('Blocked', ( (False, 'False') (

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.083 (s). 11 q(s)