How do I apply a CSS to a clutter stage?

Question

I'm trying to get some clutter code to apply styles through CSS, but I can't get the styles applied. This is some example of the code that is not working:

#!/usr/bin/python
from gi.repository import Clutter, GdkPixbuf, Cogl, Gtk, Gdk

Clutter.init([])
stage = Clutter.Stage()
stage.set_size(600, 300)

pixbuf = GdkPixbuf.Pixbuf.new_from_file('menu.svg')
pixel_format = Cogl.PixelFormat.RGBA_8888 if pixbuf.get_has_alpha() \
    else Cogl.PixelFormat.RGB_888

image = Clutter.Image()
image.set_data( pixbuf.get_pixels(), pixel_format, pixbuf.get_width(),
    pixbuf.get_height(), pixbuf.get_rowstride())

image_actor = Clutter.Actor()
image_actor.set_content_scaling_filters(
    Clutter.ScalingFilter.TRILINEAR,
    Clutter.ScalingFilter.LINEAR
)
image_actor.set_content(image)
image_actor.set_size(22,22)
image_actor.set_name("MyImage")
stage.add_child(image_actor)

css = """
#MyImage {
    icon-shadow: red 0px 0px 30px;
    background-color: #000000;
    margin: 10px;
}
"""
style_provider = Gtk.CssProvider()
style_provider.load_from_data(css)

# This is the part that doesn't work
Gtk.StyleContext.add_provider_for_screen(
    Gdk.Screen.get_default(),
    style_provider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
)

stage.connect("destroy", lambda w:  Clutter.main_quit())
stage.show()
Clutter.main()

I've tried several different things, but the style never gets applied.

Answer 1

Clutter does not know anything about GTK+ or CSS, so you cannot use the GTK+ CSS machinery with Clutter.

if you want to use a GtkStyleContext and the GTK+ API to draw something inside a ClutterActor, you can use a ClutterCanvas content, and then use the gtk_render_* API with the Cairo context that the ClutterCanvas::draw signal gives you.